Cannot read Property 'name' of Undefined

Question

Gentlemen, I’m making this mistake by running my registration form..

ERROR Typeerror: Cannot read Property 'name' of Undefined at Forms.js:3282 at Forms.js:3222 at Array.foreach () At Formgroup.push.. /node_modules/@angular/Forms/fesm5/Forms.js.Formgroup. _forEachChild (Forms.js:3222) At Formgroup.push.. /node_modules/@angular/Forms/fesm5/Forms.js.Formgroup. _checkAllValuesPresent (Forms.js:3281) At Formgroup.push.. /node_modules/@angular/Forms/fesm5/Forms.js.Formgroup.setValue (Forms.js:3071) at ContactformComponent.push.. /src/app/contactform/contactform.component.ts.ContactformComponent.ngOnInit (contactform.component.ts:57) checkAndUpdateDirectiveInline (core.js:9250) checkat AndUpdateNodeInline (core.js:10514) checkat AndUpdateNode (core.js:10476)

Follows my code:

  contactFrm: FormGroup;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
                     private fb: FormBuilder,
                     private _contactService: ContactService,
                     public dialogRef: MatDialogRef<ContactlistComponent>) {}  

ngOnInit() {
    // built contact form
    this.contactFrm = this.fb.group({
      //id: [''],
      name:  [''],
      email: ['', [Validators.required, Validators.email]],
      gender: ['', [Validators.required]],
      birth: ['', [Validators.required]],
      techno: ['', [Validators.required]],
      message: ['', [Validators.required]]
    });
}

html:

<form  (ngSubmit)="onSubmit(contactFrm)"  [formGroup]="contactFrm">
    <h2>{{data.modalTitle}}</h2>

    <div>
        <mat-form-field appearance="outline">
        <mat-label>Name</mat-label>
        <input type="text" matInput placeholder="Name" name="name" formControlName="name">
        <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->
        <!-- <mat-hint>Hint</mat-hint> -->
        <mat-error *ngIf="formErrors.name">
          {{ formErrors.name }}
        </mat-error>
      </mat-form-field>
    </div>
</form>

I’m trying to make an example of this website.

Answer 1

The error is in the following html:

  <mat-error *ngIf="formErrors.name">
              {{ formErrors.name }}
   </mat-error>

you have not given a property to.

Answer 2

Just to confirm, I removed the code snippet below and yet the problem still persists...

{{ formErrors.name }}

Does it have something to do with the angular packets?

Answer 3

Good afternoon, try this code snippet.

<mat-error *ngIf="contactFrm.get('name').errors">
                  {{ contactFrm.get('name').errors.required }}
</mat-error>

Answer 4

I forgot to put this code in the error text..

I had already put but the problem continues..

formErrors = { 'name': '' 'email': ', 'gender': ' 'Birth': ', 'techno': ' 'message': '' };