Ошибка формы Не удается прочитать свойство 'get' из неопределенного

Question

Когда я добавляю пользовательскую проверку, у меня появляется ошибка, как показано ниже: ОШИБКА TypeError: Невозможно прочитать свойство 'get' из неопределенного в моем HTML-файле, потому что я использую ошибку проверки, например:

мой код выглядит так:

form: FormGroup;

  ngOnInit()  {

    this.form = this.fb.group({
      test1: [ '', [ Validators.required ] ],
      test2: [''],
      test3: [''],
    }, {
      validator: this.testValidation('test1', 'test2')
    });
  }



function testValidation(test1: string, test2: string) {
  return (group: FormGroup): {[key: string]: any} => {
  let test1 = group.controls[test1];
  let test2 = group.controls[test2];

  if (test1.value !== test2.value) {
  return {
    failTest: true
  };
}
  <form [formGroup]="form" (ngSubmit)="submit()">
    <input type="text" class="form-control" formControlName="test1" >
    <div *ngIf="form.get('test1').hasError('required')>Error1</div>
    <input type="text" class="form-control" formControlName="test2" >
    <div *ngIf="form.get('test2').hasError('failTest')>Error2</div>
 </form>

Почему у меня ошибка в строке:

<div *ngIf="form.get('test1').hasError('required')>Error1</div>

Answer 1

попробовать:

компонент тс:

export class AppComponent implements OnInit {
  form: FormGroup; //define here

  constructor(private fb:FormBuilder){ //initialize in constructor

    this.form = this.fb.group({
    test1: [ '', [ Validators.required ] ],
    test2: [''],
    test3: [''],
  }, {
    validator: this.testValidation('test1', 'test2')
  });
  }

  ngOnInit(){}

  testValidation(test1: string, test2: string) {

    return (group: FormGroup): {[key: string]: any} => {
    let test1 = group.controls['test1'];
    let test2 = group.controls['test2'];

    if (test1.value !== test2.value) {
    return {
      failTest: true
        };
      }
    }
  }
}

HTML:

<form [formGroup]="form" (ngSubmit)="submit()">
    <input type="text" class="form-control" formControlName="test1" >
    <div *ngIf="form.get('test1').hasError('required')">Error1</div>
    <input type="text" class="form-control" formControlName="test2" >
    <div *ngIf="form.get('test2').hasError('failTest')">Error2</div>
</form>

работает ДЕМО

Answer 2

Попробуйте вот так.

<input id="name" name="name" class="form-control"
      required minlength="4" appForbiddenName="bob"
      [(ngModel)]="hero.name" #name="ngModel" >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

</div>

Для просмотра полной документации. нажмите здесь