matériel angulaire md-erreur ngIf ne fonctionne pas

Question

J'essaie de valider les mots de passe avec des matériaux angulaires, mais cela ne fonctionne pas lorsque l'étiquette <md-error> inclure dans <md-form-field>. Vous pouvez voir où cela fonctionne et où ne pas. Ce que je fais mal?

import { Component, OnInit } from '@angular/core'; 
    import 'rxjs/add/operator/map'; 
    import { 
     AbstractControl, 
     FormControl, 
     Validators, 
     FormGroup, 
     FormBuilder, 
     FormsModule, 
     FormGroupDirective, 
     NgForm 
    } from '@angular/forms'; 

    function passwordMatcher(c: AbstractControl) { 
     if (!c.get('password') || !c.get('confirm')) return null; 
     return c.get('password').value === c.get('confirm').value ? null 
    : {'nomatch': true}; 
    } 

    @Component({ 
    selector: 'app-testing', 
    template: ` 

     <form [formGroup]="form"> 
      <div formGroupName="account"> 
       <md-form-field> 
        <input mdInput 
          formControlName="password"> 
       </md-form-field> 
       <md-form-field> 
        <input mdInput 
          formControlName="confirm"> 
        <md-error 
    *ngIf="form.hasError('nomatch','account')"> 
         THIS DOESN'T WORK 
        </md-error> 
       </md-form-field> 
      </div> 
     </form> 

     <md-error *ngIf="form.hasError('nomatch','account')"> 
      THIS WORK 
     </md-error> 

     <p>{{form.value | json}}</p> 
     <p>{{form.status}}</p> 
     <p>{{form.get('account.confirm').status}}</p> 
     {{form.hasError('nomatch', 'account')}} 
    `, 
    styleUrls: ['./testing.component.css'] 
    }) 
    export class TestingComponent implements OnInit { 

     form: FormGroup; 

     constructor(public fb: FormBuilder) { 
      this.form = this.fb.group({ 
       account: this.fb.group({ 
        password: '', 
        confirm: '' 
       }, {validator: passwordMatcher}) 
      }); 
     } 

     ngOnInit() { 
     } 

    } 

Answer 1

try to add the following code 
<md-form-field> 
       <input mdInput 
         formControlName="confirm" [errorStateMatcher]="myErrorStateMatcher.bind(this)"> 
       <md-error 
*ngIf="form.hasError('nomatch','account')"> 
        THIS DOESN'T WORK 
       </md-error> 
      </md-form-field> 

dans le composant ajouter la fonction

myErrorStateMatcher(){ 

    return this.form.controls["account"].getError("nomatch"); 

}