INPUT TAG IN NG-REPEAT 2


昨日動かないといっていた問題解決しました。

ネットをさまよっていると、、

http://stackoverflow.com/questions/14378401/dynamic-validation-and-name-in-a-form-with-angularjs/14379763#14379763

参考になりそうな質問を発見!

公式ではできないってことになってるけど、解決策としてng-repeatの中でng-formも生成すればvalidation効くようになるよ☆

なるほど。ng-formも一緒生成すればそこのcallbackにちゃんと設定されるってことですね。

やってみた・・・。動かない・・・。なーぜー?

<form>
<ng-form name="innerForm" class="form-group" ng-repeat="field in fields">
	<label class="col-sm-2 control-label">{{ field.label }}</label>
	<div class="col-sm-{{ field.size }}">
		<input class="form-control" type="{{ field.type }}" name="{{ field.name }}"
			ng-model="item[field.name]" ng-required="field.required" />
		<div ng-show="form[field.name].$dirty && form[field.name].$invalid">
			<span ng-show="form[field.name].$error.required">{{ field.label }}を入力してください</span>
		</div>
	</div>
</ng-form>
</form>

と思ってよく見比べてみたら、validationをform[…]がinnerFormになっていることに気付くΣ

外のほうのformの中のフィールドに中からはアクセスできないのね。

昨日試した感じ外からはこの方法でアクセスできた気がするんだけど。
いろいろ綺麗に書き直して、、、

<form>
<ng-form name="innerForm" class="form-group" ng-repeat="field in fields">
	<label class="col-sm-2 control-label">{{ field.label }} {{ (field.required) ? '*' : '' }}</label>
	<div class="col-sm-{{ field.size }}">
		<input class="form-control" type="{{ field.type }}" name="{{ field.name }}"
			ng-model="item[field.name]" ng-required="field.required" />
		<div ng-show="innerForm.$dirty && innerForm.$invalid">
			<span ng-show="innerForm.$error.required">{{ field.label }}を入力してください</span>
		</div>
	</div>
</ng-form>
</form>

以上!すっきり。