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

如何在Angular 5反应式表单中将表单控件值传递给自定义验证器函数的参数

在Angular 5的反应式表单中,可以通过自定义验证器函数来验证表单控件的值。要将表单控件的值传递给自定义验证器函数的参数,可以使用AbstractControl类的value属性。

以下是一个示例代码,展示如何在Angular 5反应式表单中将表单控件值传递给自定义验证器函数的参数:

  1. 首先,在组件类中定义一个自定义验证器函数,该函数接收一个参数,用于接收表单控件的值。例如:
代码语言:txt
复制
import { AbstractControl, ValidatorFn } from '@angular/forms';

export function customValidator(param: any): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // 在这里可以使用param参数和control.value进行验证逻辑
    // 如果验证失败,返回一个包含错误信息的对象
    // 如果验证成功,返回null
  };
}
  1. 在创建表单时,将自定义验证器函数应用到表单控件上,并传递表单控件的值作为参数。例如:
代码语言:txt
复制
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  // 组件的元数据
})
export class MyComponent {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      myControl: ['', customValidator(this.myForm.get('myControl').value)]
    });
  }
}

在上述代码中,customValidator函数被应用到myControl表单控件上,并将this.myForm.get('myControl').value作为参数传递给自定义验证器函数。

通过以上步骤,你可以在Angular 5反应式表单中将表单控件的值传递给自定义验证器函数的参数。请注意,这只是一个示例,你可以根据具体需求进行修改和扩展。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议你参考腾讯云的官方文档或咨询腾讯云的技术支持团队,以获取更详细的信息。

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

相关·内容

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

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

18.9K20

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

(isDisabled: boolean): void; } writeValue:在初始化时候将formControl递给原生表单控件(即,将模型中写入视图或 DOM 属性中); registerOnChange...:用来获取原生表单控件值更新时通知Angular表单控件更新函数(即,设置当控件接收到 change 事件后,调用函数) registerOnTouched:用来获取通知用户正在交互函数(即,设置当控件接收到...该函数会根据参数值,启用或禁用指定 DOM 元素。 ?...注册自定义验证 其中useExisting用来设置验证函数,可自定义: const UEDITOR_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR,... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.mdMarkdown编辑,支持NgModel

5.2K20

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

input,textarea 进行交互,并且很有可能需要自定义一个表单控件作为 Angular 组件而不是使用原生表单控件,而通常自定义表单控件会封装一个使用纯 JS 写控件 jQuery UI's...本文我将使用原生表单控件术语来区分 Angular 特定 formControl 和你在 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件...),你需要把更新传给这个回调函数,这样对应 Angular 表单控件也会更新(译者注:这一点可以参考 Angular 它自己写 DefaultValueAccessor 写法是如何把 input...组件封装 由于 Angular 为所有默认原生控件提供了控件访问,所以在封装第三方插件或组件时,需要写一个新控件访问。...实现自定义控件访问 实现自定义控件访问并不难,只需要两步: 注册 NG_VALUE_ACCESSOR 提供者 实现 ControlValueAccessor 接口 NG_VALUE_ACCESSOR

3.8K20

angularjs 表单验证

$parsers  $parsers是一个由函数组成数组,当用户同控制进行交互,并且ngModelController中$setViewValue()方法被调用时,其中函数在当用户同控制进行交互...ngModel从DOM中读取会被传入$parsers中函数,并依次被其中解析处理。这是为了对进行处理和修饰。 备注:ngModel....$setViewValue()函数用于设置作用域中视图。 ngModel.$set ViewValue()函数可以接受一个参数。...value(字符串):value参数是我们想要赋值给ngModel实例实际。 这个方法会更新控制上本地$viewValue,然后将递给每一个$parser函数(包括验证)。...$error $error对象中保存着没有通过验证验证名称以及对应错误信息。  $pristine $pristine是布尔型,可以告诉我们用户是否对控件进行了修改。

6.6K70

AngularDart4.0 指南- 表单

一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制双向数据绑定。 跟踪状态变化和表单控件有效性。...您可以创造性地设计控件,将它们绑定到数据,指定验证规则和显示验证错误,有条件地启用或禁用特定控件,触发内置视觉反馈等等。 Angular通过许多重复,模板化任务使处理过程变得简单。...使用ngModel双向数据绑定语法将数据属性绑定到每个表单控件。 为每个表单输入控件添加一个ngControl指令。 添加自定义CSS来提供视觉反馈。 显示和隐藏验证错误消息。...跟踪控制状态 Angular表单控件可以告诉您用户是否触摸了该控件是否改变,或者该是否失效。...表单提交,通过ngSubmit事件绑定处理。 模板引用变量,heroForm和name。 双向数据绑定([(ngModel)])。 用于验证表单元素更改跟踪NgControl 指令。

17.5K30

angular面试题及答案_angular面试

父子组件之间数据传递 @Input 父组件向子组件传递数据和传递方法(子组件中使用) @output 子组件给父组件 (事件传递方式)(子组件中使用) //子组件中使用事件发射 @output...Authentication and Authorization区别? Authentication (认证) : 用户登录凭据传递给(服务)认证API。...— 是一个函数 — 接受一个Observer对象(包含next、error、complete方法对象)作为参数 — 返回 unsubscribe 函数,...6)如果应用程序较大时,我会考虑延迟加载而不是完全捆绑应用程序。 27. 使用Angular好处 可以添加自定义directive. 优秀社区支持。 客户端和服务通讯非常便利。...方便跟踪表单控件变化 易于单元测试 33.

11K120

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。....内置验证 min 此验证要求控件大于或等于指定数字 max 此验证要求控件小于等于指定数字 required 此验证要求控件具有非空 requiredTrue 此验证要求控件为真...email 此验证要求控件能通过 email 格式验证。...minLength 此验证要求控件长度大于等于所指定最小长度。当使用 HTML5 minlength 属性时,此验证也会生效。...maxLength 此验证要求控件长度小于等于所指定最大长度。当使用 HTML5 maxLength 属性时,此验证也会生效。 pattern 此验证要求控件匹配某个正则表达式。

2.8K50

Angular 5.0.0发布!

以下简单介绍v5重大变化。要了解详情,请看changelog。 构建优化 5.0.0开始,通过CLI执行产品构建默认使用构建优化。...这样可以使用只能在运行时计算装饰中被降级(lower)。 因此现在可以不使用命名函数,而改用Lambda函数。换句话说,执行代码不会影响你d.ts或你外部API。...Angular表单添加updateOn Blur/Submit 这样可以根据 blur或 submit来运行验证和更新逻辑了,不必再单纯依赖input事件。...表单对应用很重要,如果有服务端验证,或者验证或更新会触发较慢操作,你当然希望它少跑几次。现在你可以在控件层面控制验证和更新时机了,也可以在表单层面设置。...: 'blur'}"> 或者 反应式表单 以前 newFormGroup(value); newFormControl

4.4K40

Angularjs基础(七)

AngularJS表单     AngularJS表单时输入控件集合 HTML控件     一下HTML input 元素被称为HTML 控件:         input 元素         ...禁用了使用浏览默认验证。              实例解析           ng-app 指令定义了AngularJS 应用。           ...formCtrl 函数设置了mater 对象初始,并定义了reset()方法。           reset() 方法设置了user 对象等于master对象。           ...novalidate 属性在应用中不是必须,但是你需要在 AngularJS 表单中使用,用于重写标准 HTML5 验证。...AngularJS输入验证     AngularJS表单控件可以验证输入数据。 输入验证     AngularJS表单控件可以提供验证功能,并对用户输入非法数据惊醒警告。

2K70

Angular 6.x 表单快速入门

install -g @angular/cli 创建新项目 $ ng new project-name 启动本地服务 $ cd project-name $ ng serve Angular 表单简介...比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离到组件类中 手动创建 Form Model (同步) 方便跟踪表单控件变化 易于动态添加表单控件 易于单元测试 本文主要介绍...目前 Angular 支持内建 validators 如下: required - 设置表单控件是非空 email - 设置表单控件格式是 email min - 设置表单控件最小 max...- 设置表单控件最大 minlength - 设置表单控件最小长度 maxlength - 设置表单控件最大长度 pattern - 设置表单控件需匹配 pattern 对应模式...在 Angular 表单中,若验证通过则会在表单控件上添加 ng-valid 类,若验证失败则会在表单控件上添加 ng-invalid 类。

4.6K20

Angular 2 表单(下)

每一个 input 元素都有一个 name 属性, Angular 表单模块需要使用它为表单注册控制。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...我们还可以通过 ngModel 跟踪修改状态与有效性验证,它使用了三个 CSS 类来更新控件,以便反映当前状态。...状态 为 true 时类 为 false 时控件已经被访问过 ng-touched ng-untouched 控件已经变化 ng-dirty ng-pristine 控件是有效 ng-valid...ng-invalid 这样我们就可以添加自定义 CSS 来反应表单状态。...通过 ngSubmit 来提交表单 我们可以使用 Angular 指令 NgSubmit 来提交表单, 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

1.7K10

validation怎么用_什么是确认validation

PS:如果希望只在表单提交时验证,可以设置为空。或者设置参数 binded:false binded true 是否绑定即时验证 scroll true 屏幕自动滚动到第一个验证不通过位置。...onFieldFailure false 控件验证失败时回调函数 function(field){} onSuccess false 在表单验证结果为通过时回调函数 onFailure false...在表单验证结果为失败时回调函数 PS:onSuccess 和 onFailure 请参考 [Demo] onValidationComplete false 表单提交验证完成时回调函数 [Demo...] function(form, valid){},参数: form:表单元素 valid:验证结果(ture or false) PS:使用此方法后,表单即使验证通过也不会进行提交,交给定义回调函数进行操作...;   此时需要在控件外层再套一个元素,并设置 class=”inputContainer” overflownDIV ” 设置了溢出滚动元素,格式为 jQuery 选择

2.3K10

用jquery实现表单验证_jquery验证插件

功能强大 jQuery 表单验证插件,适用于日常 E-mail、电话号码、网址等验证及 Ajax 验证,除自身拥有丰富验证规则外,还可以添加自定义验证规则。...{} onFieldFailure false 控件验证失败时回调函数 function(field){} onSuccess false 在表单验证结果为通过时回调函数 onFailure...false 在表单验证结果为失败时回调函数 PS:onSuccess 和 onFailure 请参考 [Demo] onValidationComplete false 表单提交验证完成时回调函数...[Demo] function(form, valid){},参数: form:表单元素 valid:验证结果(ture or false) PS:使用此方法后,表单即使验证通过也不会进行提交,交给定义回调函数进行操作...:data-prompt-position=”bottomLeft:20,5″ PS:偏移可以为负数 data-prompt-target 载入提示信息容器,为元素 id 仅在 promptPosition

4.3K40

如何使用AngularJS和PHP为任何位置生成短而独特数字地址

这些创建了两个隐藏控件,这些控件传递从通过表单提交任何地址派生纬度和经度信息: . . ....第5步 - 添加Google地图控件 当地图通过Google Maps JavaScript API显示在网站上时,它们包含用户界面功能,允许访问者与他们看到地图进行互动。这些功能称为控件。...首先,将以下突出显示事件侦听添加到开放标记。此代码告诉应用程序在用户通过表单提交信息时调用该processForm函数。...然后它将address输入数据字段传递给一个geocode函数,该函数返回地址上地理信息: . . . $result = geocode($data->address); . . ....当用户提交表单时,它会触发一个submit事件,并且事件监听会调用该fetchadd函数: . . .

13.2K20

7-进军 angular1.x 表单和事件、模块

拉框初始化无默认,或者有空白选项,影响美观,可通过以下方法调整: 1.给定初始化信息(ng-init) 2.隐藏空白选项(ng-show="false") 选择一个选项: {{ count }}p> div> 复制代码 模块 创建模块 你可以通过 AngularJS angular.module 函数来创建模块: ...div> var app = angular.module("myApp", []); script> 复制代码 "myApp" 参数对应执行应用 HTML...: $pristine 表单是否未被动过 $dirty 表单是否被动过 $valid 表单是否验证通过 $invalid 表单是否验证失败 $error 表单验证错误 控制意义:控制是分发者,处理临时数据...、对域($scope)进行划分 指令意义:可以重复使用,可自定义创建,代码中compare 表单验证意义:数据真实性、可靠性保证 问题 验证表单使用数据使用?

2.3K20

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

ng提供或者自定义标签和属性,用来增强HTML表现力。 标记(markup)。即双大括号{{}},可将数据单向绑定到HTML中。 过滤器(filter)。用来格式化输出数据。 表单控制。...用来增强表单验证功能。...过滤器通常是伴随标记来使用,将你model中数据格式化为需要格式。表单控制功能主要涉及到数据验证以及表单控件增强。 在这里有必要说明一下表达式概念,毕竟我们模板中大部分使用都是变量。...框架会用display:block和display:none来控制元素显隐。 三、表单控件功能相关 对于常用表单控件功能,ng也做了封装,方便灵活控制。...DOM; 2) 浏览加载angular.js文件; 3) angular监听 DOMContentLoaded  事件,监听到时开始启动; 4) angular寻找ng-app指令,确定作用范围; 5

1.9K30
领券