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

使用动态formArray Angular 7中的自定义验证器比较两个值

在Angular 7中,使用动态formArray时,可以通过自定义验证器来比较两个值。自定义验证器是一个函数,它接收一个控件作为参数,并返回一个验证结果对象。

首先,我们需要在组件中创建一个自定义验证器函数。这个函数可以在组件类中定义,也可以在单独的验证器文件中定义。以下是一个示例的自定义验证器函数,用于比较两个值:

代码语言:txt
复制
import { AbstractControl, ValidatorFn } from '@angular/forms';

export function compareValuesValidator(controlName1: string, controlName2: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value1 = control.get(controlName1)?.value;
    const value2 = control.get(controlName2)?.value;

    if (value1 !== value2) {
      return { compareValues: true };
    }

    return null;
  };
}

在这个示例中,compareValuesValidator函数接收两个控件名作为参数,然后返回一个验证器函数。验证器函数接收一个控件作为参数,并在该函数中比较两个控件的值。如果两个值不相等,则返回一个包含compareValues属性的验证结果对象,表示验证失败;否则返回null,表示验证通过。

接下来,在组件中使用这个自定义验证器。假设我们有一个动态formArray,其中包含两个控件,分别是password和confirmPassword。我们可以在组件类中的表单初始化方法中使用自定义验证器,如下所示:

代码语言:txt
复制
import { FormGroup, FormBuilder } from '@angular/forms';
import { compareValuesValidator } from './compare-values.validator';

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

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      passwords: this.formBuilder.array([
        this.formBuilder.control(''),
        this.formBuilder.control('')
      ], { validators: compareValuesValidator('password', 'confirmPassword') })
    });
  }
}

在这个示例中,我们使用formBuilder创建了一个动态formArray,并在validators选项中传入了compareValuesValidator函数,并指定了需要比较的两个控件名。

最后,在模板中显示验证错误信息。我们可以通过form.get方法获取到动态formArray的验证状态,并根据验证状态显示相应的错误信息。以下是一个示例的模板代码:

代码语言:txt
复制
<form [formGroup]="form">
  <div formArrayName="passwords">
    <div *ngFor="let password of form.get('passwords').controls; let i = index">
      <input type="password" [formControlName]="i">
    </div>
  </div>
  <div *ngIf="form.get('passwords').errors?.compareValues">
    Passwords do not match.
  </div>
</form>

在这个示例中,我们使用formArrayName指令将动态formArray绑定到模板中的div元素,并使用formControlName指令将每个控件绑定到对应的input元素上。然后,我们使用*ngIf指令根据验证状态显示错误信息。

这样,当用户输入的两个密码不相等时,会显示"Passwords do not match."的错误信息。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版(CDB):https://cloud.tencent.com/product/cdb
  • 云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iothub
  • 移动推送服务(信鸽):https://cloud.tencent.com/product/tpns
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular系列教程-第四节

两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库中FormGroup, FormControl,FormArray...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件(获取setvalue....内置验证 min 此验证要求控件大于或等于指定数字 max 此验证要求控件小于等于指定数字 required 此验证要求控件具有非空 requiredTrue 此验证要求控件为真...minLength 此验证要求控件长度大于等于所指定最小长度。当使用 HTML5 minlength 属性时,此验证也会生效。...maxLength 此验证要求控件长度小于等于所指定最大长度。当使用 HTML5 maxLength 属性时,此验证也会生效。 pattern 此验证要求控件匹配某个正则表达式。

2.8K50
  • 移除 View Engine 转用 Ivy,盘点Angular 12重要更新

    为了确保 Angular 能够提供良好类型检查、快速侦测变更,Angular 官方团队一直在调整静态检查和动态构建平台。...为了支持使用 View Engine 函数库应用程序向后兼容,Angular 官方团队开发了 ngcc 相容编译,ngcc 是编译 View Engine 函数库方法,可以让 Ivy 应用程序方便地使用...严格 null 检查将报告各可能为 null 片段。这同样是一项重大变化。 APP-INITIALIZER 令牌类型有所变更,旨在准确反映 Angular 处理返回类型。同样属于重大变化。...允许您自定义路由出口实施方法。 新版本增加对 TypeScript 4.2 支持,但对 TypeScript 4.0 与 4.1 支持功能将被移除。...在表单中,引入最小与最大验证。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件组件实际位置。

    4.4K10

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

    使用 FormBuilder 构建控件,每个控件名对应都是一个数组,第一个为控件默认,第二项和第三项则是针对这个设定同步、异步验证方法 import { Component, OnInit...同模板驱动表单数据有效性验证相同,在响应式表单中同样可以使用原生表单验证,在设定规则时,需要将模板中控件名对应数据第二个参数改为验证规则 在响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证函数添加到对应...4.4、表单自定义数据验证 4.4.1、自定义验证 在很多情况下,原生验证规则无法满足我们需要,此时需要创建自定义验证来实现 对于响应式表单,我们可以定义一个方法,对控件数据进行校验,之后将方法作为参数添加到控件定义处即可...from '@angular/forms'; // 引入 Validators 验证 import { Validators } from '@angular/forms'; /** * 自定义验证方法...在模板驱动表单中,因为不是直接使用 FormControl 实例,因此这里应该在模板上添加一个自定义指令来完成对于控件数据校验 使用 angular cli 创建一个用来进行表单验证指令 ng

    18.9K20

    for...of循环使用

    for…of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性执行语句。...– MDN 基本使用 for…of基本使用比较简单: // 遍历数组 let array = ['a', 'b', 'c']; for (let value of array) { console.log...其中done属性表示是否完成,如果是true则表示完成,false或者不写则表示没有完成;value表示,也就是for…of循环时每次使用,如果done为true时候则可以不写。...:generator调用后对象,既是可迭代对象,也是符合迭代协议对象。...,使用Object.hasOwnProperty()方法来判断: let array = ['a', 'b', 'c']; Object.prototype.formObject = true; Array.prototype.formArray

    7910

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

    对应国际官网 GLOSSARY CHEAT SHEET NGMODULE FAQS ARCHITECTURE OVERVIEW 英文水平比较推荐国际官网,这边API更新很及时 ---- angular-cli...:组件逻辑处理 // 导入装饰:装饰可以理解为一些函数封装,使其书写起来非常简洁明了 import { Component } from '@angular/core';..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道参数,后续文档我写一个如何自定义管道文章 []="":绑定组件内[单向,数据流向视图],指令,原生html控件自身属性[value...一般用于表单比较多。...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历索引保存到你自定义变量index 动态渲染(*ngIf) *ngIf="item"

    6.2K20

    Angular17 使用 ngx-formly 动态表单

    ngx-formly 是 Angular 应用实现响应式动态表单框架,不仅支持自动生成表单、易于上手自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema,还有开箱即用内置表单主题...: 推荐使用 angular-cli 提供 ng add 进行安装配置: # 1....label}格式不正确`, }, }, } 自定义携带选项验证函数: 在前面为邮箱定义验证函数使用了一个比较通用正则,如果在实际使用时除了直接修改验证函数中正则外,还可以通过第三个选项参数实现验证范围缩小...[a-zA-Z]{2,}$/, }, }, ], }, } 自定义异步验证实现唯一校验: 通过接口实现手机号在系统中唯一使用也是最为常见一个场景,通过异步验证需要使用使用同步验证函数时...CardPanel 组件类,但要记得将 CardPanel 组件提前注册后再使用; 创建自定义 Extensions 自定义扩展可以为实现动态表单提供更加便利帮助,如在系统中通常相同 key 表单需要对应相同

    56510

    angular面试题及答案_angular面试

    父子组件之间数据传递 @Input 父组件向子组件传递数据和传递方法(子组件中使用) @output 子组件传给父组件 (事件传递方式)(子组件中使用) //子组件中使用事件发射 @output...Authentication (认证) : 用户登录凭据传递给(服务)认证API。在服务验证凭据并返回JSON Web Token(JWT)。...6)如果应用程序较大时,我会考虑延迟加载而不是完全捆绑应用程序。 27. 使用Angular好处 可以添加自定义directive. 优秀社区支持。 客户端和服务通讯非常便利。...强大功能比如动画和事件处理。 使用mvc模式。 支持双向数据绑定。 支持依赖注入, restful service和有效验证。 28. Angular核心部件有哪些?...最小化组件类代码 不易于单元测试 Reactive Forms (响应式表单) 特点 比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离到组件类中

    11K120

    玩转 Angular 环境变量

    environment.ts 和 environment.prod.ts 在 Angular CLI 发布后,越来越多开发者都是使用 Angular CLI 来创建新项目: $ ng new PROJECT-NAME...CLI 除了自动生成上述两个文件之外,还会自动生成其它文件,其中就包含 Angular 应用程序入口文件 —— main.ts: import { enableProdMode } from '@...Angular 动态切换环境实现方式。...,接着打开控制台,你将会看到以下输出信息: https://test.semlinker.com 其实如果验证的话,可以不用那么麻烦,我们可以使用 ng serve 命令,因为该命令也支持 --configuration...和 environment.prod.ts 文件作用和 Angular 动态切换环境实现方式,此外后面我们还进一步介绍了如何自定义多个开发环境。

    3.2K20

    Angular2 :从 beta 到 release4.0 版本升级总结

    它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入中添加服务提供商。 具体请参考官方文档。...]="{standalone: true}" /> 若要在[ngFormModel]属性使用#url="ngForm"来进行验证,需更改验证url.valad为mgform.controls.url.valid.../$$_gendir/app/app.module.ngfactory’ #4551) PS:运行代码可通过:即时JIT编译动态引导、使用预编译( AoT - Ahead-Of-Time )两种方式...进行静态引导.静态方案可以生成更小,启动更快应用,默认优先使用。但此处因为有些动态计算环境代码,故编译失败,此处手动关闭。 5....使用angular-cli后无法自定义webpackalias, 导致文件引入路径很长,如../../../shared/。

    8.1K00

    JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

    Angular 2功能与上述不同。Angular 2不是从Angular 1重新设计,它被完全重写了。两个版本框架之间巨大变化在开发人员之间引起了相当大争议。...使用观察者来改变,这将导致仅渲染更改。 通过使用附件避免“脏检查”。 更快启动时间和固有的稳定性。 性能焦点。 友好文档和API。 缺点: Ember.js缺少控制级别的组件重用。...比较Angularjs Vs Reactjs Vs Emberjs功能 特性 AngularJS ReactJS Ember.js 动态UI绑定 允许在纯对象或甚至属性级别使用UI绑定。...你必须在模型上使用特定setter方法来更新绑定到UI,在Handlebars渲染页面的时候。...Handlebars布局和Ember后端基础设施允许编写你自己特定于应用程序HTML标签。然后,可以在任何Handlebar模板中使用自定义元素。

    12.7K60

    Angular 2.x折腾记 :(2)初步认识angular2,不一样开发模式

    基础概念 官方中文社区一把梭: 你想要都概念基本可以在这里找到。 angular-cli 启动 src是开发目录,生产打包后会产生一个dist目录; 初步说下你从启动到浏览看到app works!...:组件逻辑处理 // 导入装饰:装饰可以理解为一些函数封装,使其书写起来非常简洁明了 import { Component } from '@angular/core'; @Component...'@angular/platform-browser'; // 这也是一个装饰,用来定义模块和组件相关,比如服务,组件元素,指令,导入导出模块识别 // 每个模块定义必须有这个才能生效..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道参数,后续文档我写一个如何自定义管道文章 []="":绑定组件内[单向,数据流向视图],指令,原生html控件自身属性[value...b : 会判断item是否有a这个,防止undefined或者null让视图渲染报错 最常用内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象,用来动态判断增加多个样式

    10110

    AngularDart4.0 指南-体系结构概述 顶

    以类似的方式应用其他元数据注解以指导Angular行为。 @Injectable,@Input和@Output是一些比较流行注解。...数据绑定在模板及其组件之间通信中起着重要作用。 数据绑定对于父组件和子组件之间通信也很重要。 指令 ? Angular模板是动态。...当然,你也可以编写你自己指令。 像HeroListComponent这样组件是一种自定义指令。 服务 ? 服务是一个广泛类别,包含您应用程序所需任何,功能或特征。...组件类应该是精益。 他们不从服务获取数据,验证用户输入或直接登录到控制台。 他们将这些任务委托给服务。 一个组件工作是启用用户体验,仅此而已。...关于依赖注入要点: 依赖注入连接到Angular框架,并在任何地方使用。 注入是主要机制。        注入维护它创建服务实例容器。        注入可以从提供者创建新服务实例。

    7.9K30

    【17】进大厂必须掌握面试题-50个Angular面试

    支持验证 客户端和服务之间通讯便利 支持依赖注入 具有强大功能,例如事件处理程序,动画等。...Angular模板是什么? Angular模板是使用包含特定于Angular元素和属性HTML编写。这些模板与来自模型和控制信息结合在一起,进一步渲染这些信息以向用户提供动态视图。...Angular过滤器用于格式化表达式,以便将其显示给用户。这些过滤器可以添加到模板,指令,控制或服务中。不仅如此,您还可以创建自己自定义过滤器。...Angular摘要周期是监视监视列表过程,以跟踪监视变量变化。在每个摘要循环中,Angular都会比较范围模型先前版本和新版本。...换句话说,它将所有新作用域模型与以前作用域进行比较。由于所有监视变量都包含在单个循环中,因此任何变量任何更改/更新都将导致重新分配DOM中存在其余监视变量。

    41.3K51

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

    通过使用模板,我们可以把model和controller中数据组装起来呈现给浏览,还可以通过数据绑定,实时更新视图,让我们页面变成动态。ng模板真是让我爱不释手。...用来增强表单验证功能。   ...这么想的话似乎也能想通,好吧,先欺骗一下自己吧~ 五、特殊ng-src和ng-href   在说明这两个指令特殊之前,需要先了解一下ng启动及执行过程,如下图:   1) 浏览加载静态HTML...文件并解析为DOM;   2) 浏览加载angular.js文件;   3) angular监听DOMContentLoaded 事件,监听到时开始启动;   4) angular寻找ng-app指令...其他模板是我们动态加载,就可以放心使用{{}}了。 六、总结一下          枯燥内容终于写完!

    2.9K20

    Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

    首先需要操作表单模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应几种状态...--testform这个局部变量保存了表单所有相关信息--> <!...; 在Submit()函数内,在点击提交时候对整个表单一一去判断,传统方式基本这样 每个控件输入时候对应去触发对应事件做校验,比如[ngModelChange]来处理双向绑定校验 ---- 数据驱动...FormArray()),FormGroup()内置多种校验方式 formControlName: 同步与FormGroup构建表单内相同字段!...(6)] // Validators可选参数 // 1. required :必须验证,返回布尔 // 2. minLength : 最小长度 // 3. maxLenght: 最大长度

    3.8K20

    前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    一、验证 angularJS中提供了许多验证指令,可以轻松实现验证,只需要在表单元素上添加相应ng属性,常见的如下所示: <input Type="text" ng-model="" [name=...二、过滤器 使用过滤器格式化数据,变换数据格式,在模板中使用一个插变量。...如果要输出单引号,使序列中使用两个单引号(如: "h 'o''clock'")。...视图 — 模板(进行数据绑定HTML)会被呈现到视图中。 控制 — ngController指令声明一个控制类;该类包含了业务逻辑,在应用后台使用函数和来操控域中属性。...3.5.2、自定义时钟 上个自定义指定很简单,我将上一个指令修改为可以动态变化时间及可以给时钟指定参数与事件。 示例代码: <!

    15.4K60
    领券