首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular Material:提交父表单时,必填的mat-input字段不显示错误

Angular Material是一个UI组件库,它提供了一套现代化的UI组件,帮助开发者构建美观、响应式的Web应用程序。在Angular应用中使用Angular Material可以快速构建用户界面,并且提供了丰富的样式和交互效果。

针对你提到的问题,当使用Angular Material中的mat-input字段作为必填字段时,如果在提交父表单时该字段没有填写,应该显示错误信息。以下是解决该问题的步骤:

  1. 在父组件的HTML模板中,使用Angular的表单控件来创建表单,并将mat-input字段作为必填字段。例如:
代码语言:txt
复制
<form [formGroup]="myForm" (ngSubmit)="submitForm()">
  <mat-form-field>
    <input matInput formControlName="myField" required>
    <mat-error *ngIf="myForm.get('myField').invalid && myForm.get('myField').touched">
      该字段为必填字段
    </mat-error>
  </mat-form-field>
  <button mat-raised-button color="primary" type="submit">提交</button>
</form>
  1. 在父组件的TypeScript代码中,创建表单并进行表单验证。例如:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      myField: ['', Validators.required]
    });
  }

  submitForm() {
    if (this.myForm.valid) {
      // 执行提交操作
    } else {
      // 表单验证失败,显示错误信息
      this.myForm.markAllAsTouched();
    }
  }
}

在上述代码中,我们使用了Angular的Reactive Forms来创建表单,并使用Validators.required验证器将myField字段设置为必填字段。在submitForm方法中,我们检查表单的有效性,如果表单验证失败,我们使用markAllAsTouched方法将所有字段标记为已触摸,这样就会显示错误信息。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

  • 腾讯云云服务器(CVM):提供弹性、可靠的云服务器,适用于各种规模的应用程序和工作负载。您可以根据实际需求选择不同配置的云服务器,并根据业务需求进行弹性扩展。了解更多信息,请访问腾讯云云服务器(CVM)
  • 腾讯云云数据库MySQL:提供高性能、可扩展的关系型数据库服务,适用于各种Web应用程序和企业级应用程序。腾讯云云数据库MySQL支持自动备份、容灾、监控等功能,保障数据的安全和可靠性。了解更多信息,请访问腾讯云云数据库MySQL

希望以上信息能够帮助到你解决问题。如果还有其他疑问,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 表单

这个表格中三个字段两个是必需。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意风格显示验证错误: ?...这很好地描述了英雄类与三个必填字段(id, name, power)和一个可选字段(alterEgo)。...有些开发人员希望仅在用户进行无效更改时显示消息。 当控件是“原始隐藏消息实现了这个目标。 当您向表单添加一个“清除”按钮,您会看到此选项重要性。...文本字段变为空白,如果您更改了power,它将恢复为默认值。 用ngSubmit提交表单 用户应该能够在填写表单提交这个表单。...提交标志变为真,表格消失。 您将看到表格中显示英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮,该表消失,并且可编辑表单重新出现。

17.4K30

Angular17 使用 ngx-formly 动态表单

ngx-formly 是 Angular 应用实现响应式动态表单框架,不仅支持自动生成表单、易于上手自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema,还有开箱即用内置表单主题...; 使用 Formly 内置验证: 在新用户注册表单基础上增加输入年龄字段配置,再为每个字段配置 props 增加 required 属性,表示这是一个必填字段,就像新用户注册表单中用户名字段一样...,当点击提交按钮或删除字段录入内容字段边框颜色会变成红色,表示字段验证不通过: // 省略了部分字段 [ { key: 'username', props: { label...隐藏/显示字段: 如果需要使前面加入的确认密码字段在输入密码字段后才显示就需要使用 expressions.hide 来控制隐藏或显示: { key: 'checkPassword', type...model.password', }, } PS:hide 是框架显示提供属性,props.disabled 是继承自组件属性; 强制显示错误状态: 使用 formState 可以实现字段之间通信

41510

angularjs 表单验证

必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:   2....二、表单中控制变量 屏蔽浏览器对表单默认验证行为 在表单元素上添加novalidate标记即可,问题是我们怎么知道我们表单有哪些字段是有效,那些事非法或者无效?...$valid 未通过验证表单 formName.inputFieldName.$invalid 最后两个属性在用于DOM元素显示或隐藏是特别有用。...同时,如果要设置特定class,他们也非常有用错误 这是AngularJS提供另外一个非常有用属性:$error对象。它包含当前表单所有验证内容,以及它们是否合法信息。...例如当某个字段输入非法,.ng-invlid类会被添加到这个字段上。 你可以编辑自己喜欢CSS . 你可以私有定制化这些类来实现特定场景应用.

6.6K70

【Java 进阶篇】创建 HTML 注册页面

required:这个属性用于标记字段必填字段,如果用户未填写将无法提交表单。 处理表单提交 在实际应用中,当用户填写并提交表单,通常需要使用服务器端脚本来处理表单数据。...当表单提交后,服务器会处理用户请求,执行相应操作,并返回结果给用户。 表单验证 在处理用户提交数据表单验证是至关重要。它确保输入数据符合期望格式和要求,防止恶意数据或错误数据被提交。...验证码:为了防止自动化提交,可以添加验证码验证。 成功页面或错误处理 当用户成功提交表单,通常会显示一个成功页面或提供成功反馈信息。...如果用户提交包含错误数据,应该向用户显示错误消息,并允许其纠正错误。 在实际应用中,你可以在服务器端脚本中根据处理结果来决定是显示成功页面还是错误消息。...例如,如果用户注册成功,你可以重定向到一个感谢页面,否则,你可以显示一个错误消息页面。 总结 通过本博客,我们学习了如何创建一个简单HTML注册页面,包括表单元素、标签、输入字段提交按钮。

31220

angularjs学习第四天笔记(第一篇:简单表单验证)

您好,我是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家点评与赐教...提供了一些常见系统验证,当然也可以自定义表单验证   第二、简单了解学习anjularjsz自带表单验证     1.必填验证:required,直接添加required属性即可     2.最小长度...】,bool类型,只要有不合法都为true       错误:属性关键词【error】,bool类型,只要有不合法都为true   第五、简单实现注册页面的表单验证     在实现方式上,根据不同体验...,大致有三种方式     其一、对表单输入实时验证,只有表单验证都通过,才提交表单        实现方式:通过控制提交按钮可用性来实现               ng-disabled="loginForm...false,只有提交后才赋值为ture             验证结果提示信息,只有该属性值为true,才显示显示错误信息 <!

1.6K10

angularjs学习第四天笔记(第一篇:简单表单验证)

您好,我是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家点评与赐教...提供了一些常见系统验证,当然也可以自定义表单验证   第二、简单了解学习anjularjsz自带表单验证     1.必填验证:required,直接添加required属性即可     2.最小长度...】,bool类型,只要有不合法都为true       错误:属性关键词【error】,bool类型,只要有不合法都为true   第五、简单实现注册页面的表单验证     在实现方式上,根据不同体验...,大致有三种方式     其一、对表单输入实时验证,只有表单验证都通过,才提交表单        实现方式:通过控制提交按钮可用性来实现               ng-disabled="loginForm...false,只有提交后才赋值为ture             验证结果提示信息,只有该属性值为true,才显示显示错误信息 <!

1.3K20

详细介绍 AngularJS 表单各种特性、用法和最佳实践

表单交互AngularJS 表单还提供了一些交互性功能,例如动态显示/隐藏字段、禁用/启用按钮等。...条件显示/隐藏字段可以使用 AngularJS 指令 ng-show 和 ng-hide 来根据特定条件动态显示或隐藏表单字段。...表单提交和重置通过 AngularJS,我们可以轻松地处理表单提交和重置操作。表单提交使用 ng-submit 指令可以定义在提交表单要执行函数。...表单重置使用 ng-click 指令可以定义在按钮点击重置表单函数。...总结AngularJS 表单提供了丰富特性和功能,包括表单控件类型、属性和验证指令,以及条件显示/隐藏字段、禁用/启用按钮等交互性操作。

17330

angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家点评与赐教...第五天,昨天学习了简单表单验证,在昨天基础上,今天主要对表单验证进一步学习研究。   ...今天主要学习一下几点:文本框失去焦点后验证、表单验证提示信息显示处理优化 第一、文本框失去焦点后验证     文本框失去焦点验证效果:文本框失去焦点后对其合法性验证     文本框失去焦点验证实现方式...:定义一个指令(指令后续专门研究)当文本框失去焦点是设置focused=true,获得焦点为false                   提示显示信息添加并列显示条件(focused)     举一个具体练习实例...上面的表单验证提示信息在体验上不是很友好,同一个文本框有可能同时显示多个提示信息     新版本angularjs中,引入了ngMessages指令,用于更加友好处理方式  ngmessages

1.5K30

angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家点评与赐教...第五天,昨天学习了简单表单验证,在昨天基础上,今天主要对表单验证进一步学习研究。   ...今天主要学习一下几点:文本框失去焦点后验证、表单验证提示信息显示处理优化 第一、文本框失去焦点后验证     文本框失去焦点验证效果:文本框失去焦点后对其合法性验证     文本框失去焦点验证实现方式...:定义一个指令(指令后续专门研究)当文本框失去焦点是设置focused=true,获得焦点为false                   提示显示信息添加并列显示条件(focused)     举一个具体练习实例...上面的表单验证提示信息在体验上不是很友好,同一个文本框有可能同时显示多个提示信息     新版本angularjs中,引入了ngMessages指令,用于更加友好处理方式  ngmessages

1.6K10

Angularjs表单验证

如果表单当前没有通过验证,他将为true: formName.inputFieldName.$invalid 最后两个属性在用于DOM元素显示或隐藏是特别有用。...这些验证分别是:必须有一个长度为3或更多名字。并且最大长度限制为20个字符。最后,名称应该是必填。 让我们用属性来控制显示还是隐藏错误信息。...虽然及时验证很棒,它可以立即提醒用户,但是当他们正在输入很长能通过验证文字,他们将在输入中途看到错误提示。有更好方式来处理验证:当用户点击提交,或者当他们将光标移开输入框之后。...点击提交显示验证信息 要在用户试图提交表单显示验证,你可以通过在scope中设置一个'submitted'值,并检查该值来控制显示错误。 让我们来看看第一个例子,只有在点击提交表单显示错误。...当失去焦点验证错误 如果你想保留错误验证实时性,那么可以在用户离开该输入框显示错误信息。要做到这一点,我们可以添加一个指令,将添加一个新变量。

2.1K10

怎样使我们用户不再抵触填写Form表单

因为填表单你就像考试一样感到紧张和焦虑,对填写内容谨小慎微,慎之又慎。如果你在花时间填完了表单提交后后得到了令人沮丧反馈,你们可能会产生强烈受挫感更有甚者会对这个表单产生厌恶感。...一般来说,我们只需要把所有非必填字段全部删除只显示必填字段就可以保持表单清爽了。...但很显然大部分情况下我们都不能这么做,所以如果仍然需要展示你可选字段,请限制可选字段数量,并确保你必填字段清楚向用户标记出来。 ? 另一种让注册表单清爽方法是将注册表单拆分成为多个步骤。...每个栏目都像一个问题,因为可以显示当前填写进度,这样他们可以知道自己已经完成了多少问题,这种方式增强了用户信心,缓解了用户填写表单焦虑感,让用户可以毫无压力直到完成注册。 ? 3....如果用户在输入数据不知道你要求是什么,在他们提交答案不正确情况下用户就会收到系统错误信息,一般这种出错信息往往对用户是负面的,因为这样受挫感,就很有可能流失掉用户。

1.1K20

JQuery扩展插件Validate—6radio、checkbox、select验证

radio、checkbox、select验证其实方法与前面提到没有太大区别,但问题是错误信息会显示在同一组第一个元素后面,效果如下所示: 解决这个问题办法是将错误信息指定到一个特定位置,...属性                     error.appendTo(element.parent());    //将错误信息添加当前元素结点后面                 } else...error.insertAfter(element);                  }             },             debug: false,  //如果修改为true则表单不会提交...            女          运行结果如下: 此外:如果在参数中加上debug:true则只用于调试表单不会提交到服务器...; submitHandler: function() {}将会在表单提交到服务器前执行一些操作;用remote可以进行Ajax验证,好像有个小bug;在使用ASP.NET与validate组合使用时会有一些问题可以参考网友博文

96820

required属性作用_required作用

1,required属性 – 表示字段不能为空 (注意:只有用户单击“提交”按钮提交表单时候,浏览器才会执行验证。...> 2,关闭验证两种方式 (1)在元素中添加novalidate属性,禁用整个表单验证功能 1 (2)或给提交按钮添加...这里使用了几个新CSS伪类: required(必填)和optional(选填):根据字段中是否使用required属性来应用不同样式。...比如:想让必填元素应用浅黄色背景,而必填且当前输入无效值字段用橙色背景。...通常使用setCustomValidity()方法提供错误消息,浏览器会将该消息当做自己内置消息。在提交表单,就会看到弹出提示框中包含自定义错误消息。

3.3K20

使用原生 JavaScript 手写一个高效表单验证系统

项目需求 我们需要实现一个注册表单,其中包括以下几个字段: 用户名 邮箱 密码 确认密码 表单需要进行以下验证: 所有字段都是必填项。 用户名长度应在3到15个字符之间。...输入字段:每个输入字段都包含一个标签和一个小错误消息提示。 然后是CSS样式,使我们表单更美观: @import url('https://fonts.googleapis.com/css?...表单样式:定义表单容器、标题、表单控件和按钮样式。 表单验证样式:使用CSS类显示输入框成功和错误状态。...显示错误信息:showError函数用于显示错误信息,改变表单控件样式并显示具体错误信息。 显示成功信息:showSuccess函数用于显示成功信息,改变表单控件样式为成功状态。...事件监听:理解如何使用事件监听器处理表单提交事件。 动态样式:通过JavaScript动态添加和移除CSS类,实现表单错误和成功提示。 结束 希望这篇文章对你有所帮助!

9910

django 1.8 官方文档翻译:5-1-2 表单API

这些值只显示在没有绑定表单中,即使没有提供特定值它们也不会作为后备值。 注意,如果字段有定义initial, 而实例化表单也提供initial,那么后面的initial 将优先。...``required_css_class 将必填表单行和有错误表单行定义不同样式特别常见。例如,你想将必填表单行以粗体显示、将错误以红色显示。...错误如何显示 如果你渲染一个绑定表单对象,渲染将自动运行表单验证,HTML 输出将在出错字段附近以 形式包含验证错误。...``css_classes() 当你使用Django 快捷渲染方法,习惯使用CSS  类型来表示必填表单字段和有错误字段。...当你子类化一个自定义表单,生成子类将包含类中所有字段,以及在子类中定义字段

2.7K30
领券