Angular 表单验证不适用于组件答案

【问题标题】：Angular form validation not working with componentsAngular 表单验证不适用于组件
【发布时间】：2017-09-01 19:45:46
【问题描述】：

我有以下表单，它是绑定到角度component 的模板。当我提交时，我能够检索与$ctrl.form 关联的值，这表明form 与控制器绑定，正如预期的那样，但是submit 按钮上的$valid 不起作用。添加验证器后，该按钮始终保持禁用状态，因为表单无效。

<div class="verification step-3">
  <form name="form" ng-submit="$ctrl.submit()">
    <fieldset ng-disabled="$ctrl.isSubmitting">
      <md-content class="md-no-momentum">

        <!-- username -->
        <md-input-container class="md-icon-float md-block">
          <label>Username</label>
          <input data-id="login-username"
                 ng-model="$ctrl.form.username"
                 name="username"
                 type="text"
                 required>
        </md-input-container>

        <!-- register button -->
        <div class="text-center">
          <md-button data-id="register"
                     class="md-primary md-raised"
                     ng-disabled="!$ctrl.form.$valid"
                     ng-class="{ 'btn-disabled': !$ctrl.form.$valid }"
                     type="submit"
                     ng-click="$ctrl.submit()">
            Create account
          </md-button>
        </div>

      </md-content>
    </fieldset>
  </form>
</div>

【问题讨论】：

标签： angularjs forms angular-components

【解决方案1】：

从 $valid 中删除 $ctrl。 $valid 用于检查表单验证，因此您不需要使用控制器作为参考

改变这个

ng-disabled="!$ctrl.form.$valid"

到这里

ng-disabled="!form.$valid"

删除ngClick，因为您使用的是ngSubmit

 <md-button data-id="register"
   class="md-primary md-raised"
   ng-disabled="form.$valid"
   ng-class="{ 'btn-disabled': form.$valid }"
   type="submit"> Create account
 </md-button>

【讨论】：

完美！拥有$ctrl 更有意义，但无论如何...... :)