Реактивные формы вложения. Получение ошибки не может прочитать свойство hasError из undefined

Question

Я использовал реактивные формы вложения angular 8 с материалом angular.

в файле component.ts

this.dataForm = this.formBuilder.group({
     name: [null, Validators.required],
     user: this.formBuilder.group({ 
        firstname: [null, Validators.required],
        lastname: [null, Validators.required]
     })
});

get dataControls() {
  return this.dataForm.controls;
}

В компоненте. html файл

<form [formGroup]="dataForm">
  <mat-form-field>
     <mat-label>Name</mat-label>
     <input matInput type="text" formControlName="name" required>
     <mat-error *ngIf="dataControls.name.hasError('required')">Name required</mat-error>
  </mat-form-field>
  <div formGroupName="user">
  <mat-form-field>
     <mat-label>First Name</mat-label>
     <input matInput type="text" formControlName="firstname" required>
     <mat-error *ngIf="dataControls.firstname.hasError('required')">Firstname required</mat-error>
  </mat-form-field>
  <mat-form-field>
     <mat-label>Last Name</mat-label>
     <input matInput type="text" formControlName="lastname" required>
     <mat-error *ngIf="dataControls.lastname.hasError('required')">Lastname required</mat-error>
  </mat-form-field>
  </div>
</form>

Получение ошибки невозможно прочитать свойство hasError, равное undefined. Пробовал вроде

<mat-error *ngIf="dataControls.user.firstname.hasError('required')">Firstname required</mat-error>

но не работает

Answer 1

У вас есть FormGroup в FormGroup, поэтому:

*ngIf="dataControls.user.controls.firstname.hasError('required')"

В машинописном тексте вам нужно будет выполнить приведение (чтобы избежать синтаксической ошибки):

(<FormGroup>this.dataControls.user).controls.firstname.hasError('required') 

EDIT:

Есть способ получше, машинописная сторона:

this.dataControls.user.get('firstname').hasError('required');

Answer 2

Проблема в том, что только реактивные формы принимают: 1 - FormControl 2 - FormGroup 3 - FormArray

Если вам нужно создать вложенную форму, попробуйте что-то вроде этого

public dataForm:FormGroup = new FormGroup({
    name: ['', [Validators.required]],
    user: new FormGroup({ 
       firstname: new FormControl(''),
       lastname: new FormControl('')
    })
})

и проверьте ошибки

isControlInvalid(controlName: string): boolean {
    const control = this.formBasic.controls[controlName];
    const result = control.invalid && control.touched;
    return result;
}

в компоненте

<form [formGroup]="dataForm">
   <div>
   <input type="text" formControlName="name">
   <div class="error" *ngIf="isControlInvalid('name')"></div>
   </div>
   <fieldset formGroupName="user">
     <input type="text" formControlName="firstname">
     <input type="text" formControlName="lastname">
   </fieldset>
</form>

Я придерживаюсь логи c, что нет необходимости помещать sh отображаемый компонент в большой лог c, для условий идеально проверять значение true \ false