2017-09-15 5 views
0

角材でパスワードを検証しようとしていますが、<md-error><md-form-field>に含まれているとパスワードが正しく機能しません。あなたはそれがどこで動作し、どこで動作しないかを見ることができます。私は間違っている?成分中角材md-error ngが機能しない

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() { 
     } 

    } 

答えて

0
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> 

機能追加

myErrorStateMatcher(){ 

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

} 
関連する問題