Can not read property 'name' of undefined

Navigation
1

Gentlemen, I'm making this mistake while running my registration form ..

  

ERROR TypeError: Can not 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)       at checkAndUpdateDirectiveInline (core.js: 9250)       at checkAndUpdateNodeInline (core.js: 10514)       at checkAndUpdateNode (core.js: 10476)

Follow 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 take the example of this site .

    
asked by anonymous 11.09.2018 / 21:14

4 answers

1

The error is in the following html: 

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

You have not set a formErrors property.

    
12.09.2018 / 12:34
0

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

I had already put the problem though ..

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

    
12.09.2018 / 13:34
0

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

              {{formErrors.name}}    

Does not it have something to do with the angle packs?

    
12.09.2018 / 15:36
0

Good afternoon, try this snippet of code. 

<mat-error *ngIf="contactFrm.get('name').errors">
                  {{ contactFrm.get('name').errors.required }}
</mat-error>
    
12.09.2018 / 18:32
Error: android.widget.LinearLayout can not be cast to android.widget.GridLayout How does the Deploy process in Golang work?