Angular响应式表单 - 无法在提交时设置自定义验证消息的文本字段
创始人
2024-10-30 05:30:25
0

在Angular响应式表单中,如果想在提交表单时设置自定义验证消息的文本字段,可以通过在表单控件上使用setErrors()方法来实现。

以下是一个示例,演示了如何设置自定义验证消息的文本字段:

HTML模板:

Name is required.
Custom error message.

组件代码:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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

  constructor(private formBuilder: FormBuilder) { }

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

  onSubmit() {
    if (this.myForm.valid) {
      // Perform form submission
    } else {
      // Set custom error message
      this.myForm.get('name').setErrors({ customError: true });
    }
  }
}

在上述示例中,我们使用了一个自定义验证器customError来表示自定义错误消息。当表单提交时,如果表单无效,则会调用onSubmit()方法。在该方法中,我们使用setErrors()方法将customError设置为表单控件的错误。然后,在模板中,我们使用*ngIf指令来根据表单控件的错误状态显示相应的错误消息。

请注意,setErrors()方法接受一个对象作为参数,该对象的属性名表示错误类型,属性值表示错误值。在示例中,我们将customError设置为true,但您可以根据需要设置任何值。

希望这可以帮助到你!

相关内容

热门资讯

玩家亲测!wepoker内置辅... 玩家亲测!wepoker内置辅助器,边锋老友圈怎么开辅助,详细插件(真实有挂)边锋老友圈怎么开辅助透...
我来教教你!酷玩联盟辅助,微乐... 我来教教你!酷玩联盟辅助,微乐卡五星祈福有用吗,详细插件(有挂功能)1)微乐卡五星祈福有用吗辅助插件...
玩家必看!甘肃白银麻将辅助软件... 玩家必看!甘肃白银麻将辅助软件,微信开心泉州有技巧吗,详细攻略(有挂攻略)运微信开心泉州有技巧吗辅助...
信息共享!蛮王大厅辅助,wep... 信息共享!蛮王大厅辅助,wepoker插件程序,详细app(有挂教学)1、下载好wepoker插件程...
2024教程!乐酷辅助,海商娱... 2024教程!乐酷辅助,海商娱乐辅助器,详细方法(真的有挂)1、海商娱乐辅助器免费脚本咨询教程、海商...
实测分享!杭州都莱辅助器,上游... 实测分享!杭州都莱辅助器,上游辅助器,详细神器(讲解有挂)1、玩家可以在杭州都莱辅助器透视最简单三个...
终于懂了!小闲巴渝辅助,威信茶... 终于懂了!小闲巴渝辅助,威信茶馆app插件,详细技巧(有挂秘诀)威信茶馆app插件能透视中分为三种模...
玩家交流!广东雀神麻雀辅助神器... 玩家交流!广东雀神麻雀辅助神器,手机字牌辅助脚本工具,详细插件(确实有挂)1)手机字牌辅助脚本工具辅...
分享开挂内幕!决战卡五星游戏辅... 分享开挂内幕!决战卡五星游戏辅助器,上饶中至打炸漏洞,详细器(真的有挂)一、决战卡五星游戏辅助器游戏...
实测必看!蜜瓜大厅辅助免费下载... 实测必看!蜜瓜大厅辅助免费下载,德州扑克游戏辅助器,详细攻略(证实有挂)1、每一步都需要思考,不同水...