我有一个主表单,在其中我有一个用 ng-form 指令声明的第二个表单,如下所示:
<form name="settingsForm">
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
<ng-form name="addressForm">
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" /><br />
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
<button>Save address</button>
</ng-form>
<button>Save</button>
</form>
当我点击提交按钮时,所有输入都被验证,我想知道我是否只能验证 firstName 而不是 ng-form 因为,我想要 ng-form 在保存地址上分开提交,而不是在保存时。
最佳答案
首先,您需要禁用表单的默认验证,如 Zohaib Ijaz 所示。您可以使用验证变量 $invalid
由 AngularJS 提供。
<form name="settingsForm" novalidate>
<div>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required />
<p ng-show="validateMainForm && settingsForm.firstName.$invalid"
class="help-block">You name is required.</p>
<br />
</div>
<ng-form name="addressForm">
<div>
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" />
</div>
<div>
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required />
<p ng-show="validateAddressForm && addressForm.zip.$invalid"
class="help-block">Zip code is required</p>
</div>
<button type="submit" ng-click="submitAddressForm()">Save address</button>
<br/>
</ng-form>
<button type="submit" ng-click="submitMainForm()">Save</button>
</form>
由于您已禁用默认验证,因此验证发生在单击主表单和地址表单的提交按钮时。提交时,设置一个标志,如果该字段无效,则显示错误 block 。有一个标志
validateMainForm
对于settingsForm
和 validateAddressForm
对于addressForm
.当标志为真时,它显示 p
每个输入字段下方的元素(如果无效)。这里是 plunker这证明了这一点。
更多信息可以引用这篇博客- Angular Form Validation :
关于javascript - angularjs中嵌套表单的验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33774588/