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

如何在angular 6表单控件验证器中一次只显示一个验证

在Angular 6中,可以使用自定义验证器来实现一次只显示一个验证错误信息的功能。以下是实现该功能的步骤:

  1. 创建一个自定义验证器函数,该函数将接收表单控件作为参数,并返回一个验证错误对象(如果有错误)或null(如果没有错误)。例如,我们可以创建一个名为singleValidator的函数:
代码语言:txt
复制
import { AbstractControl, ValidatorFn } from '@angular/forms';

export function singleValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // 在这里编写验证逻辑
    // 如果有错误,返回一个包含错误信息的对象
    // 如果没有错误,返回null
  };
}
  1. 在组件中导入并使用该自定义验证器函数。假设我们有一个名为myForm的表单,其中包含一个名为myControl的表单控件,我们可以将自定义验证器应用于该控件:
代码语言:txt
复制
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { singleValidator } from './validators';

@Component({
  selector: 'app-my-component',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="myControl">
      <div *ngIf="myForm.get('myControl').errors">
        <div *ngIf="myForm.get('myControl').hasError('error1')">Error 1</div>
        <div *ngIf="myForm.get('myControl').hasError('error2')">Error 2</div>
        <div *ngIf="myForm.get('myControl').hasError('error3')">Error 3</div>
      </div>
    </form>
  `,
})
export class MyComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myControl: ['', [Validators.required, singleValidator()]],
    });
  }
}

在上述代码中,我们将自定义验证器函数singleValidator应用于myControl表单控件,并在模板中使用*ngIf指令根据不同的错误显示相应的错误信息。

请注意,上述代码只是一个示例,你可以根据实际需求进行修改和扩展。此外,你还可以根据需要添加其他验证器,例如Validators.required等。

希望这个答案能够满足你的需求。如果你需要更多帮助,请随时提问。

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

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

一、Overview angular 入坑记录的笔记第三篇,介绍 angular表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验。...4.2.3、数据的有效性验证 某些时候需要对于用户输入的信息做有效性验证,此时可以在控件上添加上原生的 HTML 表单验证来设定验证条件,当表单控件的数据发生变化时,angular 会通过指令的方式对数据进行验证...同模板驱动表单的数据有效性验证相同,在响应式表单中同样可以使用原生的表单验证,在设定规则时,需要将模板中控件名对应的数据值的第二个参数改为验证的规则 在响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证函数添加到对应的...4.4、表单的自定义数据验证 4.4.1、自定义验证 在很多的情况下,原生的验证规则无法满足我们的需要,此时需要创建自定义的验证来实现 对于响应式表单,我们可以定义一个方法,对控件的数据进行校验,之后将方法作为参数添加到控件定义处即可...在模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20
  • AngularDart4.0 指南- 表单

    一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值的双向数据绑定。 跟踪状态变化和表单控件的有效性。...您可以创造性地设计控件,将它们绑定到数据,指定验证规则和显示验证错误,有条件地启用或禁用特定控件,触发内置的视觉反馈等等。 Angular通过许多重复的,模板化的任务使处理过程变得简单。...显示Model(可选) 提交表单目前没有视觉效果。 预期的演示。 增加代码过后的demo不会教你任何关于表单的新东西。 但是这是一个锻炼一些新获得的绑定技巧的机会。...该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。 概要 Angular表单为数据修改,验证等提供支持。...模板引用变量,heroForm和name。 双向数据绑定([(ngModel)])。 用于验证表单元素更改跟踪的NgControl 指令。

    17.5K30

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel....内置验证 min 此验证要求控件的值大于或等于指定的数字 max 此验证要求控件的值小于等于指定的数字 required 此验证要求控件具有非空值 requiredTrue 此验证要求控件的值为真...email 此验证要求控件的值能通过 email 格式验证。...maxLength 此验证要求控件值的长度小于等于所指定的最大长度。当使用 HTML5 的 maxLength 属性时,此验证也会生效。 pattern 此验证要求控件的值匹配某个正则表达式。

    2.8K50

    Angularjs基础(七)

    AngularJS表单     AngularJS表单时输入控件的集合 HTML控件     一下HTML input 元素被称为HTML 控件:         input 元素         ...禁用了使用浏览的默认验证。              实例解析           ng-app 指令定义了AngularJS 应用。           ...ng-controller指令定义了应用控制。           ng-model 指令绑定了两个inputh 元素到模型的user 对象。           ...novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。...AngularJS输入验证     AngularJS表单控件可以验证输入的数据。 输入验证     AngularJS表单控件可以提供验证功能,并对用户输入的非法数据惊醒警告。

    2K70

    validation怎么用_什么是确认validation

    可以依赖多项,:validate[condRequired[id1,id2]][Demo] minSize[int] validate[minSize[6]] 最少输入字符数 maxSize[int]...PS:如果希望只在表单提交时验证,可以设置为空。或者设置参数 binded:false binded true 是否绑定即时验证 scroll true 屏幕自动滚动到第一个验证不通过的位置。...focusFirstField true 验证未通过时,是否给第一个不通过的控件获取焦点。...showOneMessage false 是否只显示一个提示信息 doNotShowAllErrosOnSubmit false 在提交表单时不显示所有的错误信息(建议使用参数 showOneMessage...;   此时需要在控件外层再套一个元素,并设置 class=”inputContainer” overflownDIV ” 设置了溢出滚动的元素,格式为 jQuery 的选择

    2.3K10

    Angular6自定义表单控件方式集成Editormd

    ControlValueAccessor 这是自定义表单组件的核心,只有继承这个接口,才有被 Angular的formControl识别的资格。...:用来获取原生表单控件的值更新时通知Angular表单控件更新的函数(即,设置当控件接收到 change 事件后,调用的函数) registerOnTouched:用来获取通知用户正在交互的函数(即,设置当控件接收到...- 用于 select 选择控件 - CheckboxControlValueAccessor - 用于 checkbox 复选控件 至于原生表单控件Angular表单控件能够保持一致的原理,可以看下...注册自定义验证 其中useExisting用来设置验证函数,可自定义: const UEDITOR_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR,... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑,支持NgModel

    5.2K20

    angularjs 表单验证

    二、表单中控制变量 屏蔽浏览表单的默认验证行为 在表单元素上添加novalidate标记即可,问题是我们怎么知道我们的表单有哪些字段是有效的,那些事非法或者无效的?...错误 这是AngularJS提供的另外一个非常有用的属性:$error对象。它包含当前表单的所有验证内容,以及它们是否合法的信息。...这个方法会更新控制上本地的$viewValue,然后将值传递给每一个$parser函数(包括验证)。...$error $error对象中保存着没有通过验证验证名称以及对应的错误信息。  $pristine $pristine的值是布尔型的,可以告诉我们用户是否对控件进行了修改。  ...$invalid $invalid值可以告诉我们当前控件中是否存在至少一个错误,它的值和$valid相反。

    6.7K70

    【译】.NET Core 3.0 Preview 3中关于ASP.NET Core的更新内容

    Forms&validation 此预览版本添加了用于处理表单验证的内置组件和基础结构。 使用. net进行客户端web开发的一个好处是能够在客户端和服务之间共享相同的实现逻辑。...,并运行它,你将获得一个基本表单,该表单在字段更改和表单提交时自动进行字段输入值的验证。...这里发生了很多事情,让我们把它一个一个地分解: 这个表单是使用新的EditForm组件定义的。...在本节中,我们将展示如何创建一个新的Angular或React模板,该模板允许我们对用户进行身份验证并访问受保护的API资源。...创建新的Angular应用程序 要创建一一个新的支持身份验证Angular应用程序,我们需要调用以下命令: 1: dotnet new angular -au Individual 这个命令创建一个新的

    22.7K10

    (转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

    input,textarea 进行交互,并且很有可能需要自定义一个表单控件作为 Angular 组件而不是使用原生表单控件,而通常自定义表单控件会封装一个使用纯 JS 写的控件 jQuery UI's...本文我将使用原生表单控件术语来区分 Angular 特定的 formControl 和你在 html 使用的表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件...// and set this value to the native control // 设置 Angular 表单控件值更新监听,每当 Angular 表单控件值更新,原生控件值也更新...组件封装 由于 Angular 为所有默认原生控件提供了控件值访问,所以在封装第三方插件或组件时,需要写一个新的控件值访问。...要么选择DefaultValueAccessor 或者内置的数据访问,否则 Angular 将会选择自定义的数据访问,并且有且只有一个自定义的数据访问(译者注:这句话参考 selectValueAccessor

    3.8K20

    angularjs中常用的ng指令介绍【转载】

    表单控制。用来增强表单验证功能。...表单的控制功能主要涉及到数据验证以及表单控件的增强。 在这里有必要说明一下表达式的概念,毕竟我们模板中大部分使用的都是变量。...也可以在标记中使用表达式,{{1+2}},或者与过滤器一起使用{{1+2 | currency}}。在框架内部,字符串不会简单的使用eval()来执行,而是有一个专门的$parse服务来处理。...三、表单控件功能相关的 对于常用的表单控件功能,ng也做了封装,方便灵活控制。...DOM; 2) 浏览加载angular.js文件; 3) angular监听 DOMContentLoaded  事件,监听到时开始启动; 4) angular寻找ng-app指令,确定作用范围; 5

    1.9K30

    走进AngularJs(二) ng模板中常用指令的使用方式

    表单控制。用来增强表单验证功能。   ...表单的控制功能主要涉及到数据验证以及表单控件的增强。   在这里有必要说明一下表达式的概念,毕竟我们模板中大部分使用的都是变量。...也可以在标记中使用表达式,{{1+2}},或者与过滤器一起使用{{1+2 | currency}}。在框架内部,字符串不会简单的使用eval()来执行,而是有一个专门的$parse服务来处理。...三、表单控件功能相关的   对于常用的表单控件功能,ng也做了封装,方便灵活控制。   ...文件并解析为DOM;   2) 浏览加载angular.js文件;   3) angular监听DOMContentLoaded 事件,监听到时开始启动;   4) angular寻找ng-app指令

    2.9K20

    HTML5表单及其验证

    简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览会把焦点指向输入控件。...那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。...表单验证 表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化,让web应用更快的抛出错误,但它仍不能取代服务端的验证,重要数据还要要依赖于服务端的验证,因为前端验证是可以绕过的...目前任何表单元素都有八种可能的验证约束条件: 名称 用途 用法 valueMissing 确保控件中的值已填写 将required属性设为true, <input type="text"required...,我们可能需要统一其验证行为,借助javascript我们可以统一浏览验证行为。

    1.8K40

    Angular 5.0.0发布!

    我们很高兴地宣布Angular 5.0.0——五角形甜甜圈发布啦!这又是一个主版本,包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、更好用的一贯目标。 ?...构建优化 5.0.0开始,通过CLI执行的产品构建默认使用构建优化。 构建优化是CLI中的一个工具,它基于我们对你Angular应用的理解,可以把构建后的包变得更小。 构建优化有两个主要任务。...通过把状态从服务传送到客户端,开发者就不用再发第二HTTP请求了。状态转交的相关文档几周后会发布。 Angular Universal团队还把平台服务Domino加到了平台服务中。...Angular表单添加updateOn Blur/Submit 这样可以根据 blur或 submit来运行验证和更新值的逻辑了,不必再单纯依赖input事件。...表单对应用很重要,如果有服务端验证,或者验证或更新值会触发较慢的操作,你当然希望它少跑几次。现在你可以在控件层面控制验证和更新值的时机了,也可以在表单层面设置。

    4.4K40

    ASP.NET验证控件学习总结与正则表达式学习入门

    因为客户端脚本是在客户端运行,我们可以定义好检验规则,在客户端就可以完成检验,一旦不能通过验证客户端马上就能得到提示,而不用将整个表单提交到服务(笔者早些年曾经就有这样的经历:网速28.8K的情况下提交一个注册表单...在服务端检查是指将表单提交到服务后在服务上用服务端代码进行验证(如用C#或者VB.NET等),服务验证的优点是我们的验证规则对用户来说是一个黑匣子,比较难找出我们验证代码的漏洞,并且服务验证的代码编写起来相对客户端脚本要容易得多...我们对Button服务控件的OnClientClick加上一个客户端验证方法,只有当这个客户端方法返回true的时候表单才会向服务提交,如果用户填写的数据不符合要求就返回false值。...: 如果我们填写的字符个数不是6到10个之间提交表单会看到如下效果: 通过上面的例子展示了如何在asp.net中如何利用客户端脚本对表单进行验证,经过上面的大家也能感觉得到用客户端脚本对表单进行验证的编码特点...asp.net服务控件和HTML服务控件,而不能验证普通HTML控件,如果要普通HTML控件进行验证,只能像笔者在上一个例子中演示的那样自己编写客户端脚本代码进行验证

    2.6K30

    Angular 2 表单(下)

    一个 input 元素都有一个 name 属性, Angular表单模块需要使用它为表单注册控制。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...我们还可以通过 ngModel 跟踪修改状态与有效性验证,它使用了三个 CSS 类来更新控件,以便反映当前状态。...状态 为 true 时的类 为 false 时的类 控件已经被访问过 ng-touched ng-untouched 控件值已经变化 ng-dirty ng-pristine 控件值是有效的 ng-valid...删除掉 name 字段的数据,显示结果如下所示: 添加一个网站 接下来我们创建一个用于添加网站的表单,在 app/site-form.component.html 添加一个按钮: app/site-form.component.html...通过 ngSubmit 来提交表单 我们可以使用 Angular 的指令 NgSubmit 来提交表单, 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

    1.7K10

    Angular17 使用 ngx-formly 动态表单

    ngx-formly 是 Angular 应用实现响应式的动态表单框架,不仅支持自动生成表单、易于上手的自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema,还有开箱即用的内置表单主题...Validation 表单验证主要包括:Formly 内置验证、自定义验证消息及自定义验证函数三大块,自定义验证消息和验证函数分别还可以正在全局注册和指定字段注册,在不同的场景可以考虑不同的自定义方式...; 使用 Formly 内置验证: 在新用户注册表单的基础上增加输入年龄字段的配置,再为每个字段配置的 props 增加 required 属性,表示这是一个必填的字段,就像新用户注册表单中用户名字段一样...,:在实际验证时需要校验特定后缀的邮箱; FormlyModule.forChild({ validators: [ { name: 'email', validation...FormlyModule.types: FormlyModule.forRoot({ types: [{ name: 'input-field', component: InputFieldComponent }], }) 最后将其中一个

    65010
    领券