角型検証はコンポーネントでは機能しません

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を削除します。あなたはngSubmitを使用しているので、この

ng-disabled="!form.$valid" 

にこの

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

変更もngClickを取り除く参考にコントローラを使用する必要はありませんので、フォーム検証をチェックする$valid使用

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