我遇到这种情况,我分两步显示 1 个表单。因此,要进入表单的第二部分,您必须单击一个按钮。但在继续之前,我想执行表单验证(需要填写所有必填字段)。但由于这是一个普通按钮,因此不会触发整个提交魔术,也不会发生验证。所以我感兴趣的问题是如何在控制器中触发表单验证?甚至最好触发特定字段的验证。只是为了给出一个想法,形式看起来像
<form name="form" submit="save()">
<section id="step1">
<label for="username" required>Username</label>
<input type="text" name="username" ng-model="user.username" required />
.....
<button ng-click="proceed()">Proceed</button>
</section>
<section id="step2">
<label ...></label>
<input...>
....
<button type="submit">Save</button>
</section>
</form>
另外,在所有必填字段都有效之前,我不想选择禁用该按钮。
看看ng-form指令。它允许嵌套表单(实际上不是HTML <form>
,而是Angular NgFormControllers)。因此,您可以将用于发布到服务器的一个表单拆分为两个逻辑表单,用于独立验证:
<form submit="save()">
<div ng-form="form1">
...controls...
<button ng-click="proceed()"
ng-disabled="form1.$invalid">Proceed</button>
</div>
<div ng-form="form2">
...controls...
<button type="submit"
ng-disabled="form2.$invalid || form1.$invalid">Submit</button>
</div>
</form>
控制器访问 $valid
属性。这样的事情可以工作。
$scope.proceed = function(){
if($scope.form.username.$valid){
//username is valid we may proceed to the next step
}
};
<button ng-click="proceed()">Proceed</button>
替换为 :
<button ng-click="proceed()" ng-disabled="form.$invalid">Proceed</button>
在所有必填字段都有效之前,按钮将不可见按钮。
演示