フォームサブミット（外側）の入力フィールド（inside）を角で確認する

Question

ディレクティブに与えられた属性に基づいて入力を出力するディレクティブmy-inputを作成しました。また、レンダリングされた入力も検証し、無効な入力があった場合はエラーを表示する必要があります。このディレクティブは問題なく動作しますが、フォーム提出時にこれらの入力をテストすることができないという問題があります。

ページが読み込まれ、何もせずに投稿をクリックすると、何も起こらないとします。エラーを表示し、エラーのハイライトになるテキストボックスを表示します。助けてくださいPlunker

[plnkr]: https://plnkr.co/edit/E89BjKbHGLYt5u4RdTLi?p=preview 

：

現在地ライブバージョンを見ることができます。

Answer 1

すべてのフォーム入力フィールドにフィールドセットを使用すると、応答がなくなるまですべての入力が完全に無効になります。

<fieldset ng-disabled="vm.isSaving"> 
 
     <md-input-container class="md-block mt20"> 
 
      <md-icon tabindex="-1" md-svg-src="../../images/materialIcons/ic_person_24px.svg" class="name ng-isolate-scope"></md-icon> 
 
      <input ng-model="vm.userName" id="txtUserName" type="text" placeholder="Username (required)" ng-required="true"> 
 
     </md-input-container> 
 
     <md-input-container class="md-block"> 
 
      <md-icon tabindex="-1" md-svg-src="../../images/materialIcons/ic_email_24px.svg" class="email"></md-icon> 
 
      <input ng-model="vm.emailAddress" type="email" placeholder="Email (required)" ng-required="true"> 
 
     </md-input-container> 
 
     <md-input-container class="md-block"> 
 
      <md-icon tabindex="-1" md-svg-src="../../images/materialIcons/ic_email_24px.svg" class="email"></md-icon> 
 
      <input ng-model="vm.retypeEmailAddress" type="email" placeholder="Retype Your Email (required)" ng-required="true"> 
 
     </md-input-container> 
 
     <p class="fb">YOUR PASSWORD WILL BE EMAILED</p> 
 
     <button type="submit" class="btn btn-lg btn-success w200" data-ng-click="vm.register($event)">Create Account</button> 
 
    </fieldset>

例えば onclick関数セットvm.isSaving = true;エラーが発生した場合はvm.isSaving = false;私は角物質警告を使用します。私はReusable Angular Material Dialog and Toast for Information Helper and Alert

こちらをご覧

showAlert('Unable to register', 'Email Address already registered - request password recovery', ev);

1行でそれを呼び出します