angularjs：以编程方式触发表单验证（在控制器内）答案

【问题标题】：angularjs: trigger form validate programmatically (inside a controller)angularjs：以编程方式触发表单验证（在控制器内）
【发布时间】：2013-09-30 06:21:59
【问题描述】：

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

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

【问题讨论】：

为什么要 1 个表格？您可以将其一分为二并使用 Angular 的验证。只有当第一个表单有效时，才应启用“继续”按钮。
我认为正确的方法是为验证做一个指令..
我选择一种形式，因为整个提交回服务器（包括文件上传等）更容易，只需一个电话。以及如何使用指令来完成？

标签： forms validation angularjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

替换为：

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

在所有必填字段都有效之前，按钮将不可见。

DEMO

【讨论】：

不，不正确。从 UI 的角度来看，这不是一回事。禁用该按钮往往会使用户感到困惑。通常认为更好的做法是始终启用按钮，并且仅在填写表单时或提交表单后显示错误消息。