Angular验证:Mat-Error在更正输入后不消失。
创始人
2024-10-30 11:30:12
0

在Angular的表单验证中,当我们使用Mat-Error指令来显示表单验证错误消息时,有时会出现错误消息仍然显示在UI上的情况,即使我们已更正了输入错误。

解决这个问题的一种方法是在正确输入后手动清除错误消息。在我们的组件中,我们可以使用Angular的FormControl实例中的setErrors方法来清除Mat-Error的错误消息。以下是一个示例代码:

HTML模板:

{{errorMessage}}

组件代码:

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.scss']
})
export class MyFormComponent {
  myForm = new FormGroup({
    myControl: new FormControl('', [Validators.required])
  });

  get errorMessage() {
    return this.myForm.get('myControl').hasError('required') ? 'This field is required' : '';
  }

  clearErrorMessage() {
    if (this.myForm.get('myControl').valid) {
      this.myForm.get('myControl').setErrors(null);
    }
  }
}

在上面的示例中,我们首先定义了一个表单并为其添加一个控件' myControl '。然后,我们定义了一个getter来检查控件是否具有“required”验证错误,并返回相应的错误消息。最后,我们定义了一个clearErrorMessage方法,以便在控件输入正确时清除错误消息。

在我们的HTML模板中,我们使用Mat-Error指令并告诉它在控件的状态是无效时显示错误消息。在控件的状态被更正为有效时,我们调用该clearErrorMessage方法来

相关内容

热门资讯

第4个代码!wepower插件... 第4个代码!wepower插件(辅助技巧)软件透明挂(有挂秘籍)-哔哩哔哩;最新版本免费下载安装哦,...
十神器!雀神训练秘籍(辅助挂)... 您好,雀神训练秘籍这款游戏可以开挂的,确实是有挂的,需要了解加微【841106723】很多玩家在这款...
第五个辅助!德扑ai助手软件(... 第五个辅助!德扑ai助手软件(数据软件)软件透明挂(有挂辅助)-哔哩哔哩;科技详细教程小薇《7574...
8稳赢(德扑之星创建)外挂透明... 8稳赢(德扑之星创建)外挂透明挂辅助挂(透视)解密教程(讲解有挂)-哔哩哔哩;德扑之星创建黑科技是一...
八个规律!微扑克辅助器ios(... 八个规律!微扑克辅助器ios(ai辅助神器)透视辅助(有挂分享)-哔哩哔哩;亲,其实确实真的有挂(需...
第二外挂!约约吉林麻将app有... 第二外挂!约约吉林麻将app有挂吗(辅助挂)太坑了其实真的有挂(真的有挂)-哔哩哔哩1、起透看视 约...
五个后台!德州ai人工智能(禁... 这是一款非常优秀的德州ai人工智能 ia辅助检测软件,能够让你了解到德州ai人工智能中牌率当中全部隐...
5输赢(Wepoke系统)外挂... 5输赢(Wepoke系统)外挂透明挂辅助app(透视)存在挂教程(有挂头条)-哔哩哔哩;支持多人共享...
第3个免费!微扑克游戏辅助器(... 第3个免费!微扑克游戏辅助器(app发牌规律)辅助透视(有挂解密)-哔哩哔哩,支持语音通讯、好友开房...
七AI!财神十三张有外挂么(辅... 七AI!财神十三张有外挂么(辅助挂)太坑了其实真的有挂(有挂方法)-哔哩哔哩1、用户打开应用后不用登...