Passwort und ConfirmPassword-Validierung funktioniert nicht in Angular 2

Question

Ich habe folgenden Code aus dem Plotter für password und confirmPassword übereinstimmende Validierung.

import {Component} from '@angular/core'; 
import {Control, ControlGroup, FormBuilder, Validators,Validator} from '@angular/common'; 
import {CustomValidator} from './CustomValidator'; 

@Component({ 
    selector: 'register', 
    templateUrl: './app/authentication/register_validation/register.html', 
}) 

export class RegisterComponent{ 
    registrationForm: ControlGroup; 
    password: Control; 

    constructor(formBuilder:FormBuilder) 
    { 
     this.registrationForm = formBuilder.group({ 
      email: ['',Validators.compose([Validators.required, CustomValidator.underscore])], 
      matchingPassword: formBuilder.group({ 
       password: ['',Validators.compose([Validators.required,CustomValidator.minPasswordLength])], 
       confirmPassword: ['',Validators.required] 
      }, {Validator:this.areEqual}) 
     }); 
    } 

    areEqual(group: ControlGroup) { 
    var valid = false; 


    for (name in group.controls) 
    { 
     if (val === undefined) 
     { 
     var val = group.controls[name].value 
     } 
     else 
     { 
     if (val !== group.controls[name].value) 
     { 
      valid = false; 
      break; 
     } 
     } 
    } 

    if (valid) { 
     return null; 
    } 

    return { 
     areEqual: true 
    }; 
} 
} 

Und folgende ist mein HTML-Vorlage:

<register> 
    <form [ngFormModel] = "registrationForm"> 
     <div class = "form-group"> 
      <label class = "control-label" for="email">Email</label> 
      <input class = "form-control" type="email" id="email" ngControl="email" #email="ngForm"> 
     </div> 
     <div *ngIf = "email.touched && email.errors"> 
      <div *ngIf = "!email.errors.required && email.errors.underscoreNotFound" class = "alert alert-danger"> 
       <span>Underscore is required</span> 
      </div> 
      <div *ngIf = "email.errors.required" class = "alert alert-danger"> 
       <span>Email is required</span> 
      </div> 
     </div> 
     <div class = "form-group"> 
      <label class = "control-label" for="password">Password</label> 
      <input class = "form-control" type="password" id="password" ngControl="password" #password="ngForm"> 
     </div> 
     <div ng-control-group="matchingPassword"> 
      <div *ngIf = "password.touched && password.errors"> 
       <div *ngIf = "!password.errors.required && password.errors.passwordLengthIncorrect" class = "alert alert-danger"> 
        <span>Password should contain 6 characters</span> 
       </div> 
       <div *ngIf = "!password.errors.required && !password.errors.passwordLengthIncorrect && password.errors.pattern" class = "alert alert-danger"> 
        <span>Password should have correct pattern</span> 
       </div> 
       <div *ngIf = "password.errors.required" class = "alert alert-danger"> 
        <span>Password is required</span> 
       </div>   
      </div> 
      <div class = "form-group"> 
       <label class = "control-label" for="confirmPassword">Confirm Password</label> 
       <input class = "form-control" type="password" id="confirmPassword" ngControl="confirmPassword" #confirmPassword="ngForm"> 
      </div> 
      <div *ngIf = "confirmPassword.touched"> 
       <div *ngIf = "!confirmPassword.errors.areEqual" class = "alert alert-danger"> 
        <span>Password and Confirm Password should be same</span> 
       </div> 
    <!--   <div *ngIf = "confirmPassword.errors.required" class = "alert alert-danger"> 
        <span>Password is required</span> 
       </div> --> 
      </div> 
     </div> 
    </form> 
</register> 

Aber das gibt mir Fehler wie:

browser_adapter.ts: 78 ORIGINAL AUSNAHME: Kann nicht die Kontrolle 'Passwort' gefunden

Es ist nicht in der Lage, Passwort zu erkennen geben n in der Kontrollgruppe matchingPassword. Hat jemand eine Idee, warum ich mit diesem Problem konfrontiert bin?

Answer 1

Sie können Inline-Formular und explizites Formular (mit FormBuilder) nicht mischen. So würde ich die Vorlage auf diese Weise umgestalten:

<input class = "form-control" type="password" id="password" 
     [ngFormControl]="registrationForm.controls.matchingPassword.controls.password"> 

und Updates Ausdrücke entsprechend ...