mat-error 不显示错误消息 角度 5

2024-03-15

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

角度版本:- 5.2.1

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>

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

formControlname 上有拼写错误。其 formControlName 为大写 N。

分叉堆栈闪电战 https://stackblitz.com/edit/angular-hcr8bl-rnayva

建议 :

您不应该在 mat-error 上添加 *ngIf。垫子错误的全部目的是避免做这样的事情。

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

那么你可以简单地尝试一下:

<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>
...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

mat-error 不显示错误消息 角度 5 的相关文章

随机推荐

  • 是否有可能在不更改 HOST 上的内容的情况下从 GUEST 工作站获取 VMWARE HOST 计算机名称? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 假设我有 VMWARE 工作站 来宾 Windows 并由 Windows 托管 有没有可能的方法来接收托管计算机的主机名 并且无需更改主
  • ngValue 返回索引和值

    使用 ngValue 从选择返回的值是索引和值的串联 如果我用这个
  • 我试图在视图控制器之间传递数据,但 16 个变量中只有一半传递? [复制]

    这个问题在这里已经有答案了 本质上 我试图将 16 个不同的变量从一个视图控制器传递到另一个视图控制器 但只传递最后 8 个对手变量 我不确定我做错了什么 或者为什么只有那 8 个 有共同的 对手 被通过 我是 XCode 新手 所以任何可
  • 生成脚手架 ConnectionFactory 时出错

    我有一个名为 Applicant 的简单课程 我正在尝试使用实体框架添加一个模板控制器 并将 Applicant 作为我的模型类 以及一个新的数据上下文 每次我尝试创建控制器时 都会收到一个错误对话框 其中显示 无法检索 MyNameSpa
  • Internet Explorer 7 中的 @font-face 问题

    我的一个网站的 font squirrel 生成 font face 代码有问题 该字体在 Internet Explorer 7 中不显示 在其他浏览器中它工作得很好 地址是 http www mrsherskin com http ww
  • 使用 pandas 和 matplotlib 绘图

    我正在尝试用 Python 创建散点图 我有一个具有指定类别的数据框 df x 和 y 是列号 groups df groupby category fig ax plt subplots for name group in groups
  • Google + iPhone API 无需离开应用程序即可登录和共享

    我最近在我的应用程序中集成了 Google API 这很容易 我唯一的问题是 一切都需要您离开应用程序然后再回来 它使用 URL 方案 这不是我想要的行为 有没有办法直接调用他们的服务 并像在 LinkedIn API 中一样对响应执行任何
  • 太多的子进程 fork() [重复]

    这个问题在这里已经有答案了 代码 for ii 0 ii lt 24 ii switch fork case 1 printf n nproblem with fork n n exit 0 case 0 WriteOnShared Mem
  • 是否可以以有限的权限安装到程序文件中?

    我有一个将作为 MSI 包部署的应用程序 在 WiX 中编写 我正在决定是否指定elevated or limited安装程序所需的权限 除了位于 Program Files 下的默认安装位置之外 该应用程序不包含任何需要提升权限的内容 现
  • electro-forge如何指定打包的源目录?

    我已经操纵了创建反应应用程序与电子锻造app 现在我需要以某种方式指定从 CRA 生成的构建文件夹用于打包 该文件夹也应该被提供 电子锻造可以实现这样的事情吗 我知道您是在问如何告诉 electro forge 在哪个目录中找到源文件来打包
  • 无法在 FireFox 中更改 HTML5 音频标记的音量

    在本页http www metrovancouver org services solidwaste Holiday Pages Song aspx http www metrovancouver org services solidwas
  • XNA 媒体播放器快进/快退

    使用 XNA 4 0 我当前正在使用以下命令播放用户 PC XBox360 上的歌曲 Microsoft Xna Framework Media MediaPlayer Play Song song 我看到媒体播放器有一个静态属性比赛位置正
  • 如何确保 OS X 10.10 (Yosemite) 中的 Applescript 对话框焦点?

    在 OS X 10 10 Yosemite 之前 我可以通过告诉 当前应用程序 激活来确保 applescript 对话框获得焦点 tell current application activate set output to do she
  • 每当 Gem 无法在 Capistrano 中正确运行“bundle exec”时

    我在使用 Capistrano 将每当 gem 部署到我的生产环境时遇到问题 问题源于一个bundle exec whenever命令触发了一些 缺少 gem 问题 但从 shell 运行捆绑安装显示一切实际上都在那里 我的感觉是发生了两件
  • 为什么 Spring 不为关系数据库提供反应式(非阻塞)客户端?

    我用过Vert x https vertx io 用于创建反应式应用程序的工具包 支持关系数据库 例如MySQL 和 Postgres https vertx io docs vertx mysql postgresql client ja
  • C# 中日期时间更改时收到通知

    最近我正在尝试制作一个日历应用程序 它将向用户显示当前的年月日期 问题是 如果用户想让我的应用程序在第二天继续运行 我如何收到通知 我该如何更改显示的日期 我不想轮询当前日期来更新它 这在c 中可能吗 注意 我尝试过系统事件 TimeCha
  • 如何将任何类型的日期转换为 dd/mm/yyyy

    我从任何日期格式的 csv 文件接收文本 例如 dd mm yy or dd mm yyyy or mm dd yyyy or 4 may 2010 我如何转换为单一类型的格式 dd mm yyyy 我正在研究 C NET 3 5 WinF
  • MPDF 在末尾显示额外的页面

    我使用 mpdf 从 html 生成 pdf 生成的 pdf 存在一个问题 即多显示一页 如果内容在第 1 页结束 则生成 2 个页面 如果内容在第 2 页结束 则生成 3 个页面 这是我的代码
  • 用于搜索网站并提取结果的 Excel 宏

    我在工作表 1 的 A1 中有一个值 它可以是企业名称 或其关联的企业编号 当网站按编号或名称搜索时 输入需要详细信息的公司名称 或编号 后 我希望能够单击 搜索 按钮并将搜索结果显示在包含 2 列的表格中 例如工作表 1 A5 B9 标签
  • mat-error 不显示错误消息 角度 5

    问题是即使我将字段留空并移至另一个字段 也不会显示错误消息 我无法找到我在这里做错了什么 任何帮助将不胜感激 如果我在 onFormValuesChanged 上放置断点 它永远不会到达断点 我尝试过在构造函数内移动表单的构建部分 但没有任