ngClassとフォーム検証のタイムライン

Question

フォームが無効な場合は、赤色のエラーメッセージを表示します。 ngClassを使用してこれを達成しましたが、モデルが有効であってもページの読み込み時に赤色のエラーメッセージが表示されます。

私はシンプルngClassとシンプルな形があります。form.controls.roleName値は、ページのロード時に空ではないので、私はCTORでフォームのモデルをロード

<div [ngClass]="{'has-error': form.controls.roleName.valid == false}"> 
... 
constructor(){ 
    this.form = this.formBuilder.group({ 
       roleName: ['', Validators.required] 
      }); 

    this.getModel(); 
} 

を。しかし、divにはclass = "has-error"があります（例：<div class="has-error">）。ユーザーが変更検出を有効にすると仮定したページとユーザーが対話するとき、divは次のようになります。<div class>

モデルをバインドする前に検証が機能していると思っています。ページの読み込み時にフォームモデルをバインドした後にエラーメッセージを表示しないようにするにはどうすればよいですか？

Answer 1

これはtouched又はpristine

<div [ngClass]="{'has-error': form.controls.roleName.valid == false && form.controls.roleName.touched}"> 

と組み合わせることが必要です