角度のある物質のトリガタッチの状態をプログラムで

Question

私は角度4の反応性フォームを@angular/materialバージョン2.0.0-beta.10で使用しています。プログラムで、md-errorメッセージを表示させる必要があります。

必須のフィールドでは、ユーザーがテキストを入力せずに入力を終了すると、「このフィールドは必須です」というmd-errorがあります。コードを参照してください：

<md-form-field> 
    <input mdInput type="text" 
      formControlName="PartNumber" 
      placeholder="Part Number" 
      maxlength="250" 
      required /> 
    <md-error *ngIf="formGroup.controls['PartNumber'].hasError('required')"> 
     Part Number is <strong>required</strong> 
    </md-error> 
</md-form-field> 

を私は両方を試してみた：

this.formGroup.markAsTouched(); 
this.formGroup.markAsDirty(); 

私はmarkAsTouched()またはmarkAsDirty()を呼び出すとき<input>下md-errorテキストは表示されません。

エラーメッセージが表示されるようにプログラムでタッチ状態をトリガするにはどうすればよいですか？

Answer 1

よりよい解決策がcustom error matcherを使用することもできます。 http://plnkr.co/edit/U5xtdKWggcbgU2EHKkK9?p=preview

<md-form-field> 
    <input mdInput [formControl]="myInput" placeholder="My Input" [errorStateMatcher]="showWhenISayTo"> 
    <md-error>Field is required</md-error> 
</md-form-field> 


// Set this to `true` to show the errors 
showError = false; 

myInput = new FormControl('', Validators.required) 

showWhenISayTo =() => { 
    return this.showError; 
} 

また、あなたは世界的に同じ動作を使用するように設定することができます：ここで

は、エラーが表示されるべきときを決定するために、クラスのプロパティを使用した例です。無効なコントロールが汚れたらすぐにエラーを表示する例を示します：http://plnkr.co/edit/gcQuzYChrl5d7UYXo8eS?p=preview

import {MD_ERROR_GLOBAL_OPTIONS, showOnDirtyErrorStateMatcher} from '@angular/material'; 

@NgModule({ 
    providers: [ 
    {provide: MD_ERROR_GLOBAL_OPTIONS, useValue: {errorStateMatcher: showOnDirtyErrorStateMatcher}} 
    ] 
}) 

Answer 2

溶液は、各制御をループにし、触れたようにそれぞれをマーク：

Object.keys(this.formGroup.controls).forEach(key => { 
    const ctrl = this.formGroup.get(key); 
    ctrl.markAsTouched({ onlySelf: true }); 
});