角度（v4）で送信ボタンを無効にせずにすべての検証を実行するにはどうすればよいですか？

Question

私は、フォームならば、我々はすべてのエラーの検証を発射することができ提出上の角度の以前のバージョンのようにデータ

を提出する前に、ボタンや火災見つからないか、間違ったフィールド検証を提出するのクリックでフォームフィールドのすべての検証を確認したいですフォームが無効である場合状態が

if (scope.sampleForm.$valid) { 
// success code 
} else { 
    angular.forEach(scope.sampleForm.$error, function (field) { 
      angular.forEach(field, function (errorField) { 
        errorField.$setTouched(); 
      }) 
    });     
} 

無効である私は、これに関連する多くの答えをチェックし、ほとんどの答えは送信ボタンを無効にされ、私はボタンを無効にせずにこれを達成したい、私はこれを達成行うことができますどのように私を提案してください？私はテンプレート駆動アプローチ角度（v4）を使用しています

Answer 1

方法について新しい変数を導入する、例えばsubmittedし、フォームコントロールfirstnameのために、たとえば以下のような条件に何か設定：

<div *ngIf="submitted && !firstname.valid"> 
    <!-- Error messages here --> 
</div> 

、フォームが有効でない場合、あなただけのtrueとしてこのフラグを設定し、あなたの提出方法について：

(ngSubmit)="onSubmit(myForm)" 

TS：

onSubmit(form) { 
    if(!form.valid) { 
    this.submitted = true; 
    } 
    else { 
    // valid, do something 
    } 
} 

Answer 2

フォームの各入力にhtml name属性を追加する必要があります。 name属性は、フォームインスタンスのプロパティの名前を指定します。フィールドが チェック汚れている場合

<form #f="ngForm" novalidate> 

<md-input-container> 
    <input mdInput type="text" 
     placeholder="Name" 
     name = "name" 
     [(ngModel)] = "user.name" 
     #userName = "ngModel" 
     minlength="4" 
     required 
     nameRahul> 
</md-input-container> 
<div *ngIf="formErrors.name[0]"> 
    <div *ngFor = "let data of formErrors.name" class="alert alert-danger"> 
    {{data}} 
    </div> 
</div> 
</form> 

あなたは、フォームコントロールを利用し、確認することができ、より良い理解のためにこれらの2つのファイル

https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/template-driven/template-driven.component.html

https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/template-driven/template-driven.component.ts

https://rahulrsingh09.github.io/AngularConcepts/#/template