web-dev-qa-db-de.com

mat-error zeigt keine Fehlermeldung an 5

Das Problem ist, dass die Fehlermeldung nicht angezeigt wird, auch wenn das Feld leer bleibt und in ein anderes Feld verschoben wird. Ich kann nicht finden, was ich hier falsch mache. Jede Hilfe wäre sehr dankbar. Wenn ich onFormValuesChanged () mit einem Haltepunkt versetze, trifft er niemals die Haltepunkte. Ich habe versucht, den Build-Teil aus dem Konstruktor heraus zu verschieben, habe aber keine Auswirkungen. Ich bin nicht sicher, ob das Wertänderungsereignis des Formulars ausgelöst wird oder nicht, wenn der Feldwert geändert wird 

winkel ver: - 5.2.1 

HTML Quelltext 

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

komponente.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();
    });
  }
}

Sie haben einen Schreibfehler bei formControlname. Sein formControlName mit Großbuchstaben N.

Gabelblitz

rat : 

Sie sollten * ngIf bei mat-error nicht hinzufügen. Der ganze Punkt des Mattenfehlers ist, solche Dinge zu vermeiden. 

und Sie sollten eine mat-form-field-Komponente verwenden, um Ihre Eingabe einzuhüllen

so kannst du einfach versuchen: 

<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

Das könnte spät sein, aber ich habe das gleiche Problem und habe herausgefunden, dass ich meine Eingabe [formControl] zuerst an die formGroup binden muss, bevor ich die formControl so erhalte:

<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

Ich sehe keinen ErrorStateMatcher? Sie sollten ihn verwenden.

Hier ist der Stackblitz des Material-Dokuments mit einer Eingabe, die den errorstatematcher verwendet: https://stackblitz.com/angular/voepaombnnb

1
Manon Ingrassia