Пользовательские валидаторы Angular5: ng: Идентифицированный 'passwordG' не определен. - PullRequest
Новая
       10

Пользовательские валидаторы Angular5: ng: Идентифицированный 'passwordG' не определен.

0 голосов
/ 06 июня 2018

Работая в angular5, пытаюсь внедрить пользовательские валидаторы для пароля и пароля подтверждения.

Это .html: 

 <div formGroupName = "passwordG">

    <div class="form-group">
      <label for="vat">Password</label>
      <input type="password" class="form-control" id="vat"    formControlName="password" />
    </div>

    <div class="form-group">
      <label for="vat">Confirmation Password</label>
      <input type="password" class="form-control" id="vat" formControlName="Confirmationpassword" />
    </div>


    <div *ngIf="(passwordG.invalid && passwordG.touched)" class="col-sm-3 text-danger">

      <ng-container *ngIf="passwordG.errors?.mismatch;
            then first else second"> </ng-container>

      <ng-template #first>
        Password do not match </ng-template>

      <ng-template #second>
        Password needs to be more than 8 characters
      </ng-template>
    </div>

    </div>

In .ts: 

ngOnInit() {
this.form = this.formBuilder.group({

  passwordG: this.formBuilder.group({
    password: ['',[Validators.required,Validators.minLength(9)]],
    Confirmationpassword : ['',[Validators.required,Validators.minLength(9)]]

  }, {validator: passwordMatch})

});
}

В том же файле .ts, из этого класса у меня есть функция: 

 function passwordMatch(control: AbstractControl):{[key: string]: boolean}{

  const password = control.get('password');
  const Confirmationpassword = control.get('Confirmationpassword');

  if( !password || !Confirmationpassword) {
    return null; }

  if(password.value === Confirmationpassword.value){
    return null;
  }

  return {
    mismatch:true
  }

}

Проблема в файле .html iполучить эту ошибку: 

ng: Identified 'passwordG' is not definded. The component declaration ,Template variable declaration and element reference do not contain such a member  ,

В строке: 

<div *ngIf="(passwordG.invalid && passwordG.touched)" class="col-sm-3 text-danger">

Есть идеи?

1 Ответ

0 голосов
/ 06 июня 2018

passwordG сам не определен в компоненте.

Если вы хотите получить доступ к элементу управления в форме, вы можете использовать

form.controls['passwordG'] или form.get('passwordG')

...