web-dev-qa-db-fra.com

mat-error n'affichant pas le message d'erreur angulaire 5

Le problème est que le message d'erreur ne s'affiche pas même si je laisse le champ vide et que je passe à un autre champ. Je suis incapable de trouver ce que je fais mal ici. Toute aide serait très appréciée. si je mets un point d'arrêt sur onFormValuesChanged (), il ne frappe jamais les points d'arrêt. J'ai essayé de déplacer la partie de construction de l'intérieur du constructeur, mais je n'ai aucun impact. Je ne sais pas si l'événement de changement de valeur du formulaire est déclenché ou non lorsque la valeur du champ est modifiée 

ver angulaire: - 5.2.1 

Code HTML 

   <div>
    <form [formGroup]="formPersonalRecord">
    <mat-input-container class="full-width-input">
    <input matInput placeholder="First Name" formControlname="firstName">
      <mat-error *ngIf="formErrors.firstName.required">
      Please provide name.
      </mat-error>
     </mat-input-container>
     <mat-input-container class="full-width-input">
     <input matInput placeholder="Last Name" formControlname="lastName">
     </mat-input-container>
      <mat-input-container class="full-width-input">
      <input matInput placeholder="Father's Name" formControlname="fatherName">   
     </mat-input-container>
     <mat-input-container class="full-width-input">
      <input matInput placeholder="Email" formControlname="email">
       <mat-error *ngIf="formErrors.email.required">
        Please provide a email name.
       </mat-error>
     </mat-input-container>
    </form>
    </div>

composant.cs 

import { Component, OnInit } from '@angular/core';
import { EmployeePersonalRecord } from '../employee/employee-personal-record';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { fuseAnimations } from '../../core/animations';
import { HrService } from '../hr.service';



@Component({
  // tslint:disable-next-line:component-selector
  selector: 'app-add-employee',
  templateUrl: './add-employee.component.html',
  styleUrls: ['./add-employee.component.scss'],
  animations: fuseAnimations
})

export class AddEmployeeComponent implements OnInit {

  employeePersonalRecord:   EmployeePersonalRecord     = {} as EmployeePersonalRecord;
  public formPersonalRecord:       FormGroup;
  formErrors: any;
  constructor(private builder: FormBuilder,
    private service: HrService) {
  }

  onFormValuesChanged()
  {
    for ( const field in this.formErrors )
        {
            if ( !this.formErrors.hasOwnProperty(field) )
            {
                continue;
            }
            // Clear previous errors
            this.formErrors[field] = {};
            // Get the control
            const control = this.formPersonalRecord.get(field);
            if ( control && control.dirty && !control.valid )
            {
                this.formErrors[field] = control.errors;
            }
        }
  }

  ngOnInit() {
    this.formPersonalRecord = this.builder.group({
      firstName:              ['', Validators.required],
      lastName:               ['', Validators.required],
      email:                  ['', Validators.required],
      fatherName:             ['', Validators.required],
      dateOfBirth:            ['', Validators.required],
      addressPermanent:       ['', Validators.required],
      addressCurrent:         ['', Validators.required],
      gender:                 ['', Validators.required],
      maritalStatus:          ['', Validators.required],
      religion:               ['', Validators.required],
      cast:                   ['', Validators.required]
    });

    this.formErrors = {
      firstName:        {},
      lastName:         {},
      email:            {},
      fatherName:       {},
      dateOfBirth:      {},
      addressPermanent: {},
      addressCurrent:   {},
      gender:           {},
      maritalStatus:    {},
      religion:         {},
      cast:             {}
    };
    this.formPersonalRecord.valueChanges.subscribe(() => {
      this.onFormValuesChanged();
    });
  }
}
angularmaterial-designangular5
4
chanakya sankritayana

Vous avez une faute de frappe sur formControlname. Sa formeControlName avec N. majuscule.

stackblitz fourchu

conseil : 

Vous ne devez pas ajouter * ngIf sur mat-error. Le but de l'erreur est d'éviter de faire une telle chose. 

et vous devriez utiliser un composant mat-form-field pour envelopper votre entrée

alors pouvez-vous simplement essayer: 

<form [formGroup]="formPersonalRecord">
    <mat-form-field class="full-width-input">
       <input matInput placeholder="First Name" formControlName="firstName" />
          <mat-error>
                Please provide name.
          </mat-error>
    </mat-form-field>
...
7
Pierre Mallet

Cela peut être tard mais j'ai le même problème et j'ai découvert que je devais lier mon entrée [formControl] au formGroup avant d'obtenir le formControl comme ceci:

<form [formGroup]="formPersonalRecord">

 <mat-input-container class="full-width-input">
   <input matInput placeholder="First Name" [formControl]="formPersonalRecord.get('firstName')">
   <mat-error *ngIf="formPersonalRecord.get('firstName').hasError('required')">
      Please provide name.
   </mat-error>
 </mat-input-container>
3
Gouk

Je ne vois aucun ErrorStateMatcher? Vous devriez l’utiliser.

Voici le stackblitz de la documentation, avec une entrée utilisant errorstatematcher: https://stackblitz.com/angular/voepaombnnb

1
Manon Ingrassia