角度表單驗證不與組件配合使用

Question

我有以下表單，它是與角度爲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使用來檢查表單驗證，所以你並不需要，因爲你正在使用ngSubmit使用控制器作爲參考

改變這種

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

這個

ng-disabled="!form.$valid" 

刪除ngClick也

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