mat-error 不显示错误消息 angular 5 [英] mat-error not displaying error message angular 5

问题描述

问题是即使我将字段留空并移至另一个字段，也不会显示错误消息.我无法在这里找到我做错了什么.任何帮助将不胜感激.如果我在 onFormValuesChanged() 上设置断点，它永远不会到达断点.我曾尝试在构造函数中移动表单的构建部分，但没有任何影响.我不确定当字段值更改时是否触发表单的值更改事件

角度版本:- 5.2.1

HTML 代码

 
<form [formGroup]=formPersonalRecord"><mat-input-container class="full-width-input"><input matInput placeholder="名字"formControlname="firstName"><mat-error *ngIf=formErrors.firstName.required">请提供姓名.</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="父亲的名字";formControlname="fatherName"></mat-input-container><mat-input-container class="full-width-input"><input matInput placeholder="Email";formControlname="电子邮件"><mat-error *ngIf=formErrors.email.required">请提供电子邮件名称.</mat-error></mat-input-container></表单>

component.cs

import { Component, OnInit } from '@angular/core';从'../employee/employee-personal-record'导入{EmployeePersonalRecord}；从@angular/forms"导入 { FormBuilder, FormGroup, Validators };从'../../core/animations'导入{熔断动画}；从 '../hr.service' 导入 { HrService };@成分({//tslint:disable-next-line:component-selector选择器:'app-add-employee',templateUrl: './add-employee.component.html',styleUrls: ['./add-employee.component.scss'],动画:fuseAnimations})导出类 AddEmployeeComponent 实现 OnInit {employeePersonalRecord: EmployeePersonalRecord = {} as EmployeePersonalRecord;公共表单PersonalRecord:FormGroup；表单错误:任何；构造函数(私有构建器:FormBuilder，私人服务:HrService) {}onFormValuesChanged(){for ( this.formErrors 中的 const 字段){如果 ( !this.formErrors.hasOwnProperty(field) ){继续;}//清除之前的错误this.formErrors[field] = {};//获取控件const control = this.formPersonalRecord.get(field);if ( control && control.dirty && !control.valid ){this.formErrors[field] = control.errors;}}}ngOnInit() {this.formPersonalRecord = this.builder.group({名字:[''，Validators.required]，lastName: ['', Validators.required],电子邮件:[''，Validators.required]，父亲姓名:[''，Validators.required]，dateOfBirth: ['', Validators.required],addressPermanent: ['', Validators.required],addressCurrent: ['', Validators.required],性别:[''，Validators.required]，maritalStatus: ['', Validators.required],宗教: ['', Validators.required],演员:[''，Validators.required]});this.formErrors = {名:        {}，姓:         {}，电子邮件:            {}，父亲姓名:       {}，出生日期:      {}，地址永久:{}，地址当前:{}，性别:           {}，婚姻状况:    {}，宗教:         {}，投掷:             {}};this.formPersonalRecord.valueChanges.subscribe(() => {this.onFormValuesChanged();});}}

解决方案

您在 formControlname 上有一个拼写错误.其 formControlName 为大写 N.

分叉的stackblitz

建议:

你不应该在 mat-error 上添加 *ngIf.垫子错误的全部意义在于避免做这样的事情.

你应该使用 mat-form-field 组件来包装你的输入

所以你可以简单地尝试一下:

<mat-form-field class="full-width-input"><input matInput placeholder="名字" formControlName="firstName"/><mat-error>请提供姓名.</mat-error></mat-form-field>...

The problem is the error message is not getting displayed even if i leave the filed blank and move to another field. I am unable to find what i am doing wrong here. Any help would be highly appreciated. if i put a breakpoints on onFormValuesChanged() it never hits the breakpoints. i have tried moving the build part of form inside the constructor but don't have any impact. I am not sure if the form's value change event is triggered or not when field value is changed

angular ver : - 5.2.1

HTML Code

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

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

解决方案

You have a typo on formControlname. Its formControlName with uppercase N.

forked stackblitz

advice :

You should not add *ngIf on mat-error. The whole point of mat error is to avoid doing such thing.

and you should use mat-form-field component to wrap your input

so can you try simply :

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

这篇关于mat-error 不显示错误消息 angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！