Reactive nesting forms. Getting error cannot read property 'hasError' of undefined

问题

I used reactive nesting forms of angular 8 with angular material.

in component.ts file

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;
}

In component.html file

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

Getting error cannot read property 'hasError' of undefined. I tried like

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

But not work

回答1:

You have a FormGroup in a FormGroup so:

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

In typescript, you will need to cast (to avoid syntax error) :

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

EDIT:

There is a better way, typescript side:

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

回答2:

Rather, the problem is that only reactive forms take: 1 - FormControl 2 - FormGroup 3 - FormArray

If you need to make a nested form, try something like this

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

and check errors

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

in component

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

I adhere to the logic that there is no need to push the displayed component into a large logic, for conditions it is ideal to check the value true \ false

来源：https://stackoverflow.com/questions/62067009/reactive-nesting-forms-getting-error-cannot-read-property-haserror-of-undefin

标签

angular

angular-material