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 的相关文章

  • 如何在 Angular 模板中嵌入 GitHub gist?

    角度忽略script其模板中包含标签 但加载 GitHub gist 需要它们 执行此操作的最佳做 法是什么 使用iframe 创造script动态标记 或者是其他东西 一种方法是创建一个iframe with script里面并在你希望你
  • Material 2.0.0-beta.3 md-slider不拖动

    希望这是一个愚蠢的问题 我刚刚在为雇主构建的项目中添加了一个 md slider 因此我没有代码来表示抱歉 我将 MdSliderModule 导入到我正在使用的模块中 在我的模板中我想要的位置添加了标签 它出现了 看起来很棒 但不会拖沓
  • Angular 2 可观察间隔锁定 UI

    当我使用Observable Interval要执行 UI 的 http 刷新 如果间隔太快 它会锁定 UI 上的按钮 使其无法工作 按钮没有记录点击 似乎是一个计时问题 如果我增加时间并因此错过了 get 调用 则按钮可以工作 但数据会延
  • 如何在 Angular2 中实现间隔/轮询以与量角器一起使用?

    我有一个 angular2 应用程序 我想用量角器进行测试 在此应用程序中 我有一个带有图表的页面 该页面正在使用自动生成的数据定期更新 显然 Protractor 的一项功能是在执行测试代码之前等待脚本和 http 调用完成 但是 如果有
  • Angular 4:如何使用 HTTPClient 读取文本文件的内容

    我的 Angular 4 项目目录中有一个 txt 文件 我想读取其内容 怎么做 下面是我使用的代码 该文件位于 app 文件夹内的 files 文件夹中 我拥有 HTTPClient 代码的组件位于 app 文件夹内的 httpclien
  • Angular 4在下一行显示p标签的换行符

    我有一个 Angular 4 页面 我必须在其中显示用户评论列表 用户可以多行输入评论 我想在多行中绑定文本 我想显示以 n在新行中 我努力了 p p p comment text p 我不想更换 n with br 标签 我想要别的东西
  • MaterialComponents AlertDialog 文本颜色

    Reading MaterialComponents 主题警报对话框按钮 https stackoverflow com questions 52829954 materialcomponents theme alert dialog bu
  • 如果我不使用超时,Angular 2 焦点将不起作用

    正如您所看到的 如果我打算集中输入 我将使用 setTimeout 如果我删除 setTimeout 焦点不起作用 div div
  • Angular 2 Observable 具有多个订阅者

    我有一个 Angular 2 服务 可以从 API 获取数据 该服务有 3 个订阅者 在组件中定义 每个订阅者都对数据执行其他操作 不同的图表 我注意到我正在向 API 发出三个 GET 请求 而我想要实现的是一个请求 并且订阅者将共享数据
  • 如何在 Angular 单元测试中创建假 NgForm 对象?

    我有一个带有如下模板的组件 Template
  • http.put 请求在 Angular2 中执行两次

    我正在尝试更新从我的 Angular2 应用程序调用 API 的公司记录 我在调试时注意到 http 调用被执行了两次 我找到了另一个堆栈溢出线程 https stackoverflow com questions 37241294 ang
  • 角度订阅响应

    好吧 我对 Angular 还很陌生 所以我遇到了这个小问题 所以我遵循 Angular 指南 https angular io guide http https angular io guide http 所以我的问题是我的 http r
  • 不同事件的角度停止传播

    在我的 Angular 4 应用程序中 我有一个带有 dblclick 处理程序的父组件和一个带有 click 处理程序的子组件 组件 html
  • 如何测试包含自定义表单控件的组件?

    我有一个这样的组件 Component selector app custom form control templateUrl
  • Angular *ngFor 循环遍历数组的数组

    我有一个数组 其中包含其他数组 如下所示 array element A element B YES NO 我想使用 ngFor 循环遍历 HTML 表中的这个对象数组 table thead tr th th th COLUMN 1 th
  • Angular2:鼠标事件处理(相对于当前位置的移动)

    我的用户应该能够通过鼠标在画布中移动 或旋转 对象 当鼠标事件发生时 屏幕坐标用于计算与最后一个事件的增量 方向和长度 没什么特别的 mousedown 获取第一个坐标 mousemove 获取第n个坐标 计算deltaXY 按deltaX
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • 如何显示 GroupList 的 FormArray?

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup
  • Angular2 Router:将主题标签添加到 url

    我正在使用 Angular2 Seed 应用程序 您可以在官方仓库 https github com mgechev angular2 seed 正如您所看到的 这里我们导入了 angular2 router 并且我们使用它来创建应用程序的

随机推荐

  • 是否有可能在不更改 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 上放置断点 它永远不会到达断点 我尝试过在构造函数内移动表单的构建部分 但没有任