反応形式のmdエラーのための角型カスタムバリデータが表示されない

Question

パスワードが一致しないと私の*ngIfが表示されません。ここで

<md-form-field> 
    <input mdInput placeholder="Repeat password" type="password" formControlName="repeat"> 
    <md-error *ngIf="form.controls['repeat'].errors?.required">Field required</md-error> 
    <md-error *ngIf="form.errors?.matchingPasswords">passwords don't match</md-error> 
</md-form-field> 

は、単純な<span>の代わり<md-error>を使用して

constructor(private formBuilder: FormBuilder) { 
    this.form = this.formBuilder.group({ 
     username: 
     ['', 
     Validators.compose([ 
      Validators.required, 
      Validators.minLength(3), 
      Validators.maxLength(30), 
      this.validateUsername, 
      this.validateUsernameAvailability 
     ]) 
     ], 
     email: 
     ['', 
     Validators.compose([ 
      Validators.required, 
      Validators.maxLength(30), 
      this.validateEmail 
     ]) 
     ], 
     password: 
     ['', 
     Validators.compose([ 
      Validators.required, 
      Validators.minLength(8), 
      Validators.maxLength(30), 
      this.validatePassword 
     ]) 
     ], 
     repeat: ['', 
     Validators.compose([ 
      Validators.required 
     ]) 
     ] 
    }, {validator: this.matchingPasswords('password', 'repeat')}); 
    } 

    matchingPasswords(password, repeat) { 
    return (group: FormGroup) => { 
     // Check if both fields are the same 
     if (group.controls[password].value === group.controls[repeat].value) { 
     return null; // Return as a match 
     } else { 
     return { 'matchingPasswords': true }; // Return as error: do not match 
     } 
    }; 
    } 

@EDIT はそれを修正するようだ私のコンストラクタです。

<span *ngIf="form.errors?.matchingPasswords">passwords don't match</span>

しかし、なぜ<md-error>が表示されませんか？

Answer 1

回避方法が必要な 'bug'と思われます。

md-error内側md-form-fieldは、他の入力を考慮しないで特定の入力を検証するだけです。したがって、をの外に移動すると、md-form-fieldが検証されますが、もちろんその場合はCSSが乱れます。この修正ではなくmd-hintを使用して、ちょうどmd-errorをエミュレートするためにCSSでそれを変更することです：

<md-hint *ngIf="form.errors?.matchingPasswords">passwords don't match</md-hint> 

だけがカスタムバリデータをスキップして、そのようCustom Error Matcherを使用することができ、それを捨てる：

テンプレートで

myErrorStateMatcher(control: FormControl): boolean { 
    if(control.parent.controls.password.value === control.value) { 
    control.setErrors(null) 
    return false; 
    } 
    else { 
    control.setErrors({notSame:true}) 
    return true; 
    } 
} 

：

<input mdInput formControlName="repeat" [errorStateMatcher]="myErrorStateMatcher"> 

DEMO

しかし、これであなたは本当にこれが発射されたときの制御することはできません。コードでは、の変更が起こっているときはいつも、あなたのカスタムバリデータを持っています。それで、以下ののサイドノートを確認してください。

---

Sidenotes：

md-hintと一緒に行く私は、ネストされたフォームグループ内のpasswordとrepeatを包むだろうと、それはときにのみ変更解雇だように、そのネストされたフォーム・グループにカスタムバリデータを適用した場合これらの2つのフォームコントロールのいずれかに起こります。

repeatフォームコントロールについては、passwordフィールドと一致するかどうかを確認するよりも、他の検証を使用する必要はありません。