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

I have this situation in which I show 1 form in two steps. So to proceed to the second part of the form you have to click on a button. But before moving on I would like to perform form validation (all required fields need to be filled in). But because this is a normal button, the whole submit magic is not triggered and the validation does not happen. So the question I'm interested in is how can I trigger form validation in my controller ? It would even be better to trigger validation for specific fields. Just to give an idea, the form looks like

我有这样的情况，我在两个步骤中展示了一个表单。因此，要进入表格的第二部分，你必须点击一个按钮。但在继续之前，我希望执行表单验证(需要填写所有必需的字段)。但是因为这是一个普通的按钮，所以整个提交魔术没有被触发，验证也没有发生。我感兴趣的问题是如何在控制器中触发表单验证?甚至更好的方法是触发特定字段的验证。为了给大家一个概念，这个表格是这样的

<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>

Also, I don't want to opt for disabling the button until all required fields are valid.

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

3 个解决方案

#1

Take a look at the ng-form directive. It allows nesting forms (actually not HTML <form>s, but Angular NgFormControllers). So you can split your one form, used for posting to the server, into two logical forms, used for independent validation:

看看ng格式指令。它允许嵌套表单(实际上不是HTML

<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>

#2

You can access the $valid property from your controller. Something like this could work.

您可以从控制器访问$valid属性。像这样的东西是可以工作的。

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

#3

-1

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

Replace To :

替换:

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

Button will not visible button until all required fields are valid.

按钮将不可见按钮，直到所有必需的字段都是有效的。

DEMO

演示

#1