angularjs:触发器表单以编程方式验证(在控制器内部)

时间:2013-09-24 20:46:10

标签: forms validation angularjs

我有这种情况,我分两步显示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>    

另外,在所有必填字段都有效之前,我不想选择禁用该按钮。

3 个答案:

答案 0 :(得分:19)

看看ng-form directive。它允许嵌套表单(实际上不是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>

答案 1 :(得分:10)

您可以从控制器访问$valid属性。这样的事情可行。

 $scope.proceed = function(){     
      if($scope.form.username.$valid){
          //username is valid we may proceed to the next step
      }
 };

答案 2 :(得分:-1)

 <button ng-click="proceed()">Proceed</button>   

替换为:

 <button ng-click="proceed()" ng-disabled="form.$invalid">Proceed</button>   

在所有必填字段均有效之前,按钮将不会显示按钮。

DEMO