Angular 表单验证不适用于组件

Question

我有以下表格，它是绑定到 angular 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>

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

Angular 表单验证不适用于组件

Angular form validation not working with components

forms

angularjs

angular-components