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

Angular2 -使用自定义验证器比较两个控件值

Angular2是一种流行的前端开发框架,它提供了丰富的功能和工具来构建现代化的Web应用程序。在Angular2中,使用自定义验证器比较两个控件的值是一种常见的需求,可以通过以下步骤来实现:

  1. 创建一个自定义验证器函数,该函数接收一个抽象控件作为参数,并返回一个验证结果对象。可以使用Validators类中的compare方法来比较两个控件的值。
代码语言:typescript
复制
import { AbstractControl, Validators } from '@angular/forms';

function compare(control: AbstractControl): { [key: string]: boolean } | null {
  const value1 = control.get('control1')?.value;
  const value2 = control.get('control2')?.value;

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

  return null;
}
  1. 在需要进行比较的表单中,使用FormGroup来组织相关控件,并将自定义验证器函数应用于该FormGroup
代码语言:typescript
复制
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="control1" placeholder="Control 1">
      <input formControlName="control2" placeholder="Control 2">
      <div *ngIf="myForm.hasError('compare', 'group')">
        The values of Control 1 and Control 2 must be the same.
      </div>
    </form>
  `,
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      control1: '',
      control2: '',
    }, { validator: compare });
  }
}

在上述代码中,我们使用formGroup指令将myFormFormGroup关联起来,并使用formControlName指令将输入框与相应的控件关联起来。通过myForm.hasError('compare', 'group')可以检查是否存在比较错误,并在需要时显示相应的错误消息。

这是一个简单的示例,展示了如何在Angular2中使用自定义验证器比较两个控件的值。根据具体的业务需求,可以根据这个示例进行扩展和定制。

腾讯云提供了一系列与云计算相关的产品和服务,其中包括云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于腾讯云的信息和产品介绍。

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

相关·内容

D11-Android自定义控件之动画篇3-插与估

零、前言 估和插丰富了动画更新时的效果 为方便本案例演示使用了我的LogicCanvas绘图库--github地址,当然你也可以自己绘制 估:TypeEvaluator :该以什么方式运动...插:运动的变化情况 ---- 一、估--TypeEvaluator: 1.以二次曲线移动为例: ?...这就是估的作用。...---- 二、插--TimeInterpolator 注意输出也是要在0~1之间的变化数 安卓内置了一下插,就不说了,使用自定义来说明其中的原理 1.定义sin型插: ?...1-XXX就行了 插从表现上来看就是某个函数值域在0~1上的图象曲率变化的速率作用与View的某个属性上 ---- 三、插播一个路径动画吧: 使用sin型减速 ?

71420

Java比较两个对象中属性是否相同【使用反射实现】

在工作中,有些场景下,我们需要对比两个完全一样对象的属性是否相等。比如接口替换的时候,需要比较新老接口在相同情况下返回的数据是否相同。这个时候,我们怎么处理呢?...这里凯哥就使用Java的反射类实现。.../**  * 字段比较  * @param vo1       主项  * @param vo2       比较项  */ private void compareFiledValue(DownTempMsg... vo1, DownTempMsg vo2) {     //需要比较的字段     String [] filedArr = new String [] {"title","subTitle","dataMsg...> clazz, String propertyName) {//使用 PropertyDescriptor 提供的 get和set方法         try {             return

3.3K30

【优雅的避坑】不要轻易使用==比较两个Integer的

分别来看一下valueOf和intValue这两个方法源码。 valueOf: /** * 返回表示指定int的整数实例。...比较两个Integer的 看代码: @Test public void test() { Integer i1 = 66; Integer i2 = 66; System.out.println...避坑 那么怎么正确的比较两个Integer的呢?用equals()! ? equals: /** * 将此对象与指定对象进行比较。...Integer) { return value == ((Integer)obj).intValue(); } return false; } 哈哈,equals方法比较的是两个对象的整型...这也就是阿里Java开发手册上说的强制使用equals方法比较整型包装类对象的: ? ? END ? 推荐阅读 【优雅的避坑】从验证码生成代码的优化到JVM栈和堆 Java最强大的技术之一:反射

85010

Angular2 VS Angular4 深度对比:特性、性能

那么,本文将会对Angular2和Angular4进行深度对比,以便帮助大家更好的了解这两个版本。 Angular2 Angular2是在2015年底发布的。...实例范围: 增强的DI库是由实例范围控制组成的,当与子注入连同范围标识符一起使用时,会更加强大。...动态载入: 这是之前的Angular版本均不具备的功能,Angular2包含了这个功能,即使在开发人员忙碌时,也能够添加新的指令或控件。 模板: 在Angular2中,模板编译过程是异步的。...canActivate:它允许或阻止导航到新的控件。 激活:它会响应导航到新控件的成功事件。 canDeactivate:它将防止或允许跳出旧控制的导航。 停用:它会响应跳出旧控制的成功事件。...设计: 所有这些逻辑都是使用管道架构创建的,这使得将自己的操作添加到管道中或删除默认操作变得非常简单。此外,它的异步字符允许开发人员在管道中,实现对用户进行身份验证或加载控件信息的服务请求。

8.7K20

实战 | Change Detection And Batch Update

带着这两个问题,我将简要分析一下React、Angular1、Angular2及Vue的实现机制。...Angular1 Dirty Checking Angular1通过脏检测去更新UI,所谓的脏检测其实指Angular1从$rootScope开始遍历所有scope的$$watchers数组,通过比较新老来决定是否更新...$apply()进行脏检测的,核心代码如下 遍历所有scope的$$watchers,通过get获取到最新同last比较变化了则通过调用fn更新DOM。...如果我们不使用Angular1提供的事件系统、定时和$http,如在jQuery事件中进行数据更新时,我们需要手动调用$apply。...Angular2 当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏检测有点像,但是Angular2

3.2K20

解决Requests中使用httpbin服务问题:自定义URL的实现与验证

问题背景在使用Python的Requests模块进行单元测试时,可能会遇到无法使用本地运行的httpbin服务进行测试的问题。...解决方案为了解决这个问题,我们可以考虑修改测试脚本,使其可以接受用户自定义的URL。具体来说,可以在测试用例中检查HTTPBIN_URL环境变量,并使用代替硬编码的URL。...这样,即使用户在某些情况下无法使用httpbin.org或example.com,也可以使用自己的httpbin服务进行测试。...URL是否有效 if validate_url(custom_url): return custom_url # 如果没有自定义URL或自定义URL无效,使用默认的...如果没有自定义URL或自定义URL无效,就默认使用httpbin.org。此外,还提供了一个validate_url函数来验证URL的有效性,以确保测试用例可以正常运行。

12230

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

它标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。 它可以向应用的依赖注入中添加服务提供商。 具体请参考官方文档。...#url="ngForm"来进行验证,需更改验证url.valad为mgform.controls.url.valid 原使用ngForm 更改表单内input属性ngControl="url"为#url...[(ngModel)] 使用时需加上name以及ngDefaultControl两个属性 => <date-time-picker.../$$_gendir/app/app.module.ngfactory’ #4551) PS:运行代码可通过:即时JIT编译动态引导、使用预编译( AoT - Ahead-Of-Time )两种方式...使用angular-cli后无法自定义webpack的alias, 导致文件引入路径很长,如../../../shared/。

8.1K00

Vuejs和其他前端框架的对比

$scope变量的脏检测,使用$scope....值得注意的是当数据变化十分频繁时,脏检测对浏览性能的消耗将会很大,官方注明的最大检测脏为2000个数据。 Vue vue.js官网:是一套构建用户界面的 渐进式框架。...也有成型API提供自定义validator。这一点Vue只有v-model和第三方库。对于后台之类的重表单应用,还是Ng2有优势。 依赖注入无论你喜不喜欢DI,这就是Angular2的强大功能之一。...比如,一个视频播放控件有几个子组件完成,子组件需要分享一个状态。这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。...Polymer 自定义的元素是用 HTML 文件来创建的,这会限制使用 JavaScript/CSS (和被现代浏览普遍支持的语言特性)。

3.8K110

vue.js与其他前端框架的对比

http…) 其中双向数据绑定的实现使用了scope变量的脏检测,使用scope.scope.watch(视图到模型),scope.scope.apply(模型到视图)检测,内部调用的都是digest...值得注意的是当数据变化十分频繁时,脏检测对浏览性能的消耗将会很大,官方注明的最大检测脏为2000个数据。 Vue vue.js官网:是一套构建用户界面的 渐进式框架。...也有成型API提供自定义validator。这一点Vue只有v-model和第三方库。对于后台之类的重表单应用,还是Ng2有优势。 依赖注入无论你喜不喜欢DI,这就是Angular2的强大功能之一。...比如,一个视频播放控件有几个子组件完成,子组件需要分享一个状态。这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。...Polymer 自定义的元素是用 HTML 文件来创建的,这会限制使用 JavaScript/CSS (和被现代浏览普遍支持的语言特性)。

4.1K80

Change Detection And Batch Update

带着这两个问题,我将简要分析一下React、Angular1、Angular2及Vue的实现机制。 React Virtual DOM ?...Angular1通过脏检测去更新UI,所谓的脏检测其实指Angular1从$rootScope开始遍历所有scope的$$watchers数组,通过比较新老来决定是否更新DOM。...$apply()进行脏检测的,核心代码如下 遍历所有scope的$$watchers,通过get获取到最新同last比较变化了则通过调用fn更新DOM。...如果我们不使用Angular1提供的事件系统、定时和$http,如在jQuery事件中进行数据更新时,我们需要手动调用$apply。 Angular2 ?...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏检测有点像,但是Angular2的更新没有副作用

3.3K40

Change Detection And Batch Update

带着这两个问题,我将简要分析一下React、Angular1、Angular2及Vue的实现机制。 React Virtual DOM ?...Angular1通过脏检测去更新UI,所谓的脏检测其实指Angular1从$rootScope开始遍历所有scope的$$watchers数组,通过比较新老来决定是否更新DOM。...$apply()进行脏检测的,核心代码如下 ? 遍历所有scope的$$watchers,通过get获取到最新同last比较变化了则通过调用fn更新DOM。...如果我们不使用Angular1提供的事件系统、定时和$http,如在jQuery事件中进行数据更新时,我们需要手动调用$apply。 Angular2 ?...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏检测有点像,但是Angular2的更新没有副作用

3.7K70

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

---- 基础概念 国内的官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2的一堆为什么:..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的[单向,数据流向视图],指令,原生html控件的自身属性[value...一般用于表单比较多。...绑定赋值的条件表达式的特殊之处: 不支持: 赋值 (=, +=, -=, ...) new运算符 使用;或,的链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

6.2K20

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular2中,组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中,我们可以通过使用事件发射api来发出事件。...简而言之,EventEmitter是在@ angular/core模块中定义的类,由组件和指令使用,用来发出自定义事件。...这通常用在setter中,当类中的被更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...Promises vs Observables Promises: 返回单个 不可取消 Observables: 可以使用多个 可取消 支持map,filter,reduce和类似的操作符 ES 2016...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

17.3K80

用FlexGrid做开发,轻松处理百万级表格数据

介绍一款高效轻量的数据处理工具 -- FlexGrid,这是一个轻量级的、快速灵活的和可扩展的控件,包含在全能控件套包 ComponentOne Studio Enterprise 中。...(ASP.NET MVC)到1,314 KB(WinForms) 跨平台:FlexGrid能在超过10个平台上使用,提供相同的基本功能 以 ComponentOne FlexGrid for WinForms...比如调整列宽、调整行高、自适应匹配最佳列宽、自适应匹配最佳行高、通过下拉窗口选择单元格的数据、通过可视化日期控件或计算控件指定单元格的。 ?...学习FlexGrid的使用,可以通过以下的系列文章: Wijmo5 FlexGrid教程(1)- 在工程中绑定数据 Wijmo5 FlexGrid教程(2)- 使用数据对应DataMap功能 Wijmo5...Wijmo5 FlexGrid教程(17)- 实现多列排序功能 Wijmo5 FlexGrid教程(18)- 实现添加ToolTip提示功能 Wijmo5 FlexGrid教程(19)- 用Angular2

2.3K80

揭秘程序员眼中的 Vue 与 Angular | 码云周刊第 32 期

项目名称:基于 angular 的 UI 组件 项目简介:本项目是基于 angularjs 实现的一套 UI 组件,组件需要使用 angularjs1.3 以上版本,其中拍照组件 cameraScanner...项目名称:基于 angular2 的阅图 App 项目简介:本项目是基于 ionic2 + angular2 开发的阅图 App。...:组件化(Component),整个开发过程中就是不停的在自定义组件,至于 angular2 的其他变动,比如为了优化性能去掉了 $scope;将 ng-controller 的概念合并到了Component...;双向数据绑定脏检查的优化;嵌套路由;构造函数中的依赖注入等等。...项目名称:基于 angular2 的插件 项目简介:CodeBe ( 码B ) 是一个是使用 angular2 整合各种插件的项目,包括(layer,bootstrap-table,markdown 编辑

2K50

【分享】 纯 js 表单控件 —— 让 “增改查” 更轻松!

拖拽控件、手写、js创建还是第三方控件(包括js版)? 以前用服务控件写了一套表单控件,用起来感觉也挺方便的,只是效率太低,太占用服务的资源。...需求、目的: 1、 在前台网页,使用js自动创建表单 2、 可以控制表单里的控件类型,比如文本框、下拉列表框、在线编辑等。...比如有多少种控件、表格有几种表现形式。 其他的还没想好怎么表达出来。 使用方式: 使用就很简单了,因为俺比较懒,所以我做的东东,第一目标就是——用着省事。...1、 引用一堆js,其中自己的只有两个,一个创建控件,一个创建表单,还有一个验证数据。 2、 写一段“引导”脚本。这个基本是c#风格,当然也可以写成js风格。看个人喜好了。...选择他是因为可以直接在页面里使用。因为是纯js的表单控件,所以服务控件形式的在线编辑是不好用了。 4、 数据验证。这个好像有很多已经很成熟的了,只是一直没时间研究。

3.4K81

Angular2学习笔记

虽然这套框架我个人觉得可能的确比较适合做移动端Web的开发,但是由于网站开发的经验明显不足,加上这套技术还不是相当的成熟,在学习的过程中走了很多的弯路。...包括属性绑定、事件绑定、插绑定以及双向绑定,主要用于组件内的变量在页面中的显示以及页面等。 服务。这包括两方面,一个是访问RESTFUL的服务,另一个是用来保存本地变量的。...具体的使用方法等到需要的时候查看文档即可。 项目发布 如果是测试环境,直接ng serve就可以用node服务在本地的默认4200端口显示页面了。...这是由于Angular2默认使用的是JIT(Just-in-Time - JIT)编译。这个JIT编译有他的好处,他意味这我们的代码是在客户端解释的,那么他编译的效率会比较高,编译的结果会更好。...不过对于真正的生产环境我们显然不能用node服务,我这里用的是nginx来部署,具体步骤如下: 使用命令ng build --prod --aot来生成dist/文件夹。

2K10
领券