Angular Angular 1.5.7 中动态添加和删除表单字段的表单验证
Angular Form Validation On Dynamically Added And Removed Form Fields In Angular 1.5.7
所以我已经阅读了一些关于这个主题的帖子,但还没有完全弄明白。我尝试实施在 https://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform 找到的解决方案,但没有成功。验证确实将 ng-invalid class 添加到元素,但它不会使用 ng-show 显示错误消息。这是我目前所知道的。
首先是一个 plnkr:http://plnkr.co/edit/0Xh0o82N1xQc7Qi5Mhfe?p=preview
<h1>Dynamic Field</h1>
<div ng-controller="EmailCtrl">
<hr>
<a ng-click="addEmail()" href="#">Add Email</a>
<hr>
<form name="email_form">
<label>Main Form
<input type="email" ng-model="test.email" name="email" />
<div class="help-block" ng-show="email_form.email.$touched">
<span ng-show="email_form.email.$error.email">ERROR</span>
</div>
<p></p>
<div ng-repeat="email in emails">
<ng-form="sub_form">
sub form <input name="sub_email" type="email" ng-model="email.email" />
<div class="help-block" ng-show="sub_form.sub_email.$touched">
<span ng-show="sub_form.sub_email.$error.email">ERROR</span>
</div>
<a ng-click="removeEmail($index)" href="#">Remove Email</a>
</ng-form>
</div>
</label>
</form>
<ng-form="sub_form>
</ng-form>
应该是:
<ng-form name="sub_form">
</ng-form>
希望对您有所帮助!
所以我已经阅读了一些关于这个主题的帖子,但还没有完全弄明白。我尝试实施在 https://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform 找到的解决方案,但没有成功。验证确实将 ng-invalid class 添加到元素,但它不会使用 ng-show 显示错误消息。这是我目前所知道的。
首先是一个 plnkr:http://plnkr.co/edit/0Xh0o82N1xQc7Qi5Mhfe?p=preview
<h1>Dynamic Field</h1>
<div ng-controller="EmailCtrl">
<hr>
<a ng-click="addEmail()" href="#">Add Email</a>
<hr>
<form name="email_form">
<label>Main Form
<input type="email" ng-model="test.email" name="email" />
<div class="help-block" ng-show="email_form.email.$touched">
<span ng-show="email_form.email.$error.email">ERROR</span>
</div>
<p></p>
<div ng-repeat="email in emails">
<ng-form="sub_form">
sub form <input name="sub_email" type="email" ng-model="email.email" />
<div class="help-block" ng-show="sub_form.sub_email.$touched">
<span ng-show="sub_form.sub_email.$error.email">ERROR</span>
</div>
<a ng-click="removeEmail($index)" href="#">Remove Email</a>
</ng-form>
</div>
</label>
</form>
<ng-form="sub_form>
</ng-form>
应该是:
<ng-form name="sub_form">
</ng-form>
希望对您有所帮助!