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

如何强制Angular 2重新检查验证器?

在Angular 2中,可以使用updateValueAndValidity方法来强制重新检查验证器。该方法用于更新表单控件的值和验证状态。

具体步骤如下:

  1. 首先,获取对应的表单控件。可以通过FormControlFormGroupFormArray来表示表单控件。
  2. 调用表单控件的updateValueAndValidity方法。该方法会触发表单控件的验证器重新执行,并更新验证状态。

以下是一个示例代码:

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="myControl">
      <button (click)="forceValidation()">Force Validation</button>
    </form>
  `
})
export class ExampleComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myControl: new FormControl('', Validators.required)
    });
  }

  forceValidation() {
    const control = this.myForm.get('myControl');
    control.updateValueAndValidity();
  }
}

在上述示例中,我们创建了一个包含一个文本输入框的表单,并添加了一个必填验证器。当点击"Force Validation"按钮时,会调用forceValidation方法,该方法获取myControl控件并调用updateValueAndValidity方法来强制重新检查验证器。

这样,Angular 2会重新执行验证器,并更新验证状态,以反映最新的表单控件值的有效性。

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

请注意,以上链接仅供参考,具体产品选择应根据实际需求和情况进行评估。

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

相关·内容

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

对于成熟的开发人员来说,有以上两种选择是一件很棒的事情;但是,对于处于学习阶段的新晋开发人员来说,可能有点不知如何选择。...接下来一起了解Angular2这个版本发布的原因以及如何将其添加到Web开发中。 ...但是,AtScript不是强制性的,开发人员仍然可以选择只使用纯JavaScript / ES5代码来构建Angular应用程序。...此外,它的异步字符允许开发人员在管道中,实现对用户进行身份验证或加载控件信息的服务请求。...TypeScript 2.1和2.2兼容性: Angular4开发组将Angular升级为更新版本的TypeScript。这将提高ngc的速度,方便开发人员将在编码过程中更好的进行类型检查

8.7K20
  • Angular开发实践(二):HRM运行机制

    引言 在angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何angular-cli启用HRM,请查看HRM配置 那HMR是个什么东西呢...HMR是webpack提供的一个功能,angular-cli使用了它,它会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。...主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面时丢失的应用程序状态 只更新变更内容,以节省宝贵的开发时间 调整样式更加快速 - 几乎相当于在浏览调试中更改样式 这一切是如何运行的...我们先看看具体的效果: 1、启动angular-start项目,在控制台你可以看到HRM已经启用的消息: ? image 2、然后通过浏览控制台可以看到,第一次加载请求了所有的资源: ?...然而在多数情况下,不需要强制在每个模块中写入HMR代码。如果一个模块没HMR处理函数,更新就会冒泡。这意味着一个简单的处理函数能够对整个模块树(complete module tree)进行更新。

    1.7K70

    AngularDart4.0 指南 原

    2.开发设置 使用条件:Dart SDK,Dartium(安装sdk时会自动安装)和WebStorm 创建一个启动项目 1.打开WebStorm 2.安装Dart插件并配置sdk目录和Dartium...Note:若获取依赖不成功:       1.检查浏览能否访问pub.dartlang.org.      2.操作系统当前用户对文件的操作权限不足  windows 当前用户对C:\Users...然后,要查看您的应用程序,请使用浏览导航到pub serve显示的URL。 重新载入应用程式 每当您更改应用程序时,请重新加载浏览窗口。...5.阅读用户输入,了解如何响应用户启动的DOM事件。     6.阅读表单,其中涵盖用户界面中的数据输入和验证。    ...7.阅读依赖注入,了解如何从小型单用途零件构建大型,可维护的应用程序。     8.扫描模板语法, AngularHTML模板的综合研究。

    2.7K20

    AngularJS的digest循环和$apply

    当使用angular时,其会扩展这个标准的浏览流程,创建一个angular上下文(angular事件循环内的特定代码,该angular事件循环通常被称为$digest循环)。...这些watch列表会在watch列表会在digest循环中的“脏值检查”(检测值是否发生了变化,但整个应用还没有同步该变化)的程序解析。...指令、控制调用$evalAsync(),会在angular操作DOM之后,浏览渲染之前运行。所以,永远不要使用其来约定事件的顺序。...循环之前,会触发该值(ng-model)上运行的验证和格式化操作; (5)由于在digest循环中值发生了变化,angular需要再次运行这一循环以确定它没有改变作用域对象上的其他值。...(1)不建议在控制中使用$apply(),因为这样会导致难以测试。 (2)jquery和angular同时使用被视为一个肮脏的行为。

    3.2K41

    2021 年 Angular vs. React vs. Vue 前端框架对比

    许可证 当然,在使用一个开源框架或库之前,一定要彻底检查许可证。幸运的是,React、Angular 和 Vue 都使用 MIT 许可证。它提供了有限的复用限制,而且我们甚至还可以在专有软件中使用。...与 AngularJS 这一早期的框架不同,Angular2 是基于组件的,与 MV* 模式没有什么关联。Angular 的结构方式包括模块、组件和服务。...服务 —— Angular 应用中的一个独特元素,被 Components 用于委托业务逻辑任务,如获取数据或验证输入。...适用目标和范围 Angular Angular 最适合大型和高级项目。这些可能包括但不限于: 用于开发渐进式 Web 应用程序(PWA)。 用于重新设计网站应用程序。...加速 Web 应用程序的开发,并允许大佬将模板到虚拟 DOM 与编译分开。 经过验证的兼容性和灵活性。 不管应用程序的规模如何,代码库都不会变。

    2.2K10

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    ,进入到 angular context $digest 循环开始执行,查询每个 $watch 是否变化 由于监视 $scope.val 的 $watch 报告了变化,因此强制再执行一次 $digest...脏检查如何被触发? angular 会在可能触发 UI 变更的时候进行脏检查:这句话并不准确。...所以说不要怀疑用户在输入表单时 angular 会不会监听页面左边导航栏的变化。 如何优化脏检查与运行效率 脏检查慢吗? 说实话脏检查效率是不高,但是也谈不上有多慢。简单的数字或字符串比较能有多慢呢?...3、给 ng-repeat 手工添加 track by 不恰当的 ng-repeat 会造成 DOM 树反复重新构造,拖慢浏览响应速度,造成页面闪烁。...编译模板后如何获取编译后的模板内容并将其转成字符串

    7.8K40

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

    为了确保 Angular 能够提供良好的类型检查、快速侦测变更,Angular 官方团队一直在调整静态检查和动态构建的平台。...其它更新亮点 除了移除 View Engine,Angular 12 发行版中还包括其他新功能与重要改进: 为了提高编译 CLI 性能,若存在重新定向的源文件,新版本允许进行增量编译。...Webpack 5 模块捆绑现已实现生产就绪。 不再支持 IE11 浏览。 对于编译,新版本提供转换组件样式资源的支持能力。 对于语言服务,新版本仅在模板中提供 Angular 属性补全功能。...严格 null 检查将报告各可能为 null 的片段。这同样是一项重大变化。 APP-INITIALIZER 令牌的类型有所变更,旨在准确反映 Angular 处理的返回值类型。同样属于重大变化。...在表单中,引入最小与最大值验证。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件的组件的实际位置。

    4.4K10

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

    注意是如何在原生HTML元素中合适的存放。 自定义组件与原生HTML在相同的布局中无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。...他们不从服务获取数据,验证用户输入或直接登录到控制台。 他们将这些任务委托给服务。 一个组件的工作是启用用户体验,仅此而已。...Angular强制执行这些原则。 如果您用3000行代码编写“kitchen sink”组件,它不会抱怨。...如果注射没有HeroService,它如何知道如何制作一个? 简而言之,您必须事先在注入中注册HeroService的提供者。 提供者是可以创建或返回服务的东西,通常是服务类本身。...以下是其他重要的Angular功能和服务的简短字母顺序列表。 Forms:支持基于HTML验证和脏检查的复杂数据录入方案。

    7.9K30

    Angular 从入坑到挖坑 - Angular 使用入门

    一、Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用。...验证是否安装成功 ## 查看 angular cli 版本 ng v ## 查看 angular cli 中的各种命令解释 ng help ?...解释 --force 强制覆盖现有文件 --skipInstall 创建项目时跳过 npm install 命令 --strict 在代码中使用更严格的 typescript 编译选项 ?...e2e - 端到端测试文件 src - 单元测试源代码路径 app.e2e-spec.ts - 针对当前应用的端到端单元测试文件 app.po.ts - 单元测试源文件 protractor.conf.js...API 的支持程度不相同的情况,用来抹平不同浏览之间的支持差异 2 styles.scss - 项目的全局样式文件 test.ts - 单元测试的主入口程序 .editorconfig

    2K20

    React 困境与未来,何时迎来自己的“Angular.js 时刻”?

    难道说 Angular.js 到 Angular 2 的故事又要重演?React 是否正在重蹈前辈的覆辙? 注意:本文主要讨论 React 和 Next.js 团队引入的新功能。...现在若需要在组件树内的不同点处访问获取的数据,推荐方法是在必要时执行重新获取,再通过 React 执行重复数据删除。 这个 fetch 函数还会默认缓存数据,无论响应缓存标头如何。...我们无法在浏览检查组件以查看它使用的具体 props 或子组件。目前,调试 React 服务端组件的唯一方式就是借助 console.log。...‘ 现有应用不受影响 与 Angular.js 到 Angular 2 的过渡不同,React 服务端组件的推出并不算是重大变化。...因此,对于 React 是否将迎来自己的“Angular.js 时刻”这个问题,答案显然是否定的。但如果大家现在起打算新开一个项目,那会如何选择?

    25310

    2Angular JS 学习笔记 – 双向数据绑定和Scope概念

    这是一个重要的点,因为它使得控制不用知道将要如何显示,大大的提升了测试的环境; angular.module('scopeExample', []) .controller('MyController...作用域通知相关联的input,然后呈现出已经赋值的input,演示了控制如何将数据写入到作用域中。...当回调执行完成后,浏览器重新渲染dom,然后返回继续等待更多的事件。 当浏览调用的js代码不在angular执行上下文时,意味着angular无法发现模型的修改。...一旦angular $digest循环完成,执行就会脱离angular 和 js上下文。这之后是浏览器重新渲染dom去呈现出变化。...angular离开这个执行上下文,并且结束keydown时间在js框架中的使用。 浏览器重新渲染这个视图基于更新的文本。

    13.2K20

    Angular 1 vs. Angular 2 深度比较

    AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。...Angular 在启动时会给所有的异步交互点打补丁: 超时 Ajax 请求 浏览事件 Websockets,等等 在那些交互点,Angular 会对 scope 对象进行变动检查,如果发现有变动就激发相应的监视...重新运行变动检查检查是否有更多的变化发生,重新运行监视,等等 Angular 1 绑定运行的后果 结果是 DOM 一直同简单 Javascript 对象进行同步,尽管这样可以工作,但是这使得有时难以进行推论...Angular 2 如何因 Zones 而更透明 Angular 2 使用 zones 机制使摘要循环不再被需要。...Angular 2 如何做到更好地跟 Web Components 交互?

    2.8K100

    AngularDart4.0 指南- 表单 顶

    开发表单需要设计技巧(超出本页面的范围),以及双向数据绑定,更改跟踪,验证和错误处理的框架支持,您将在本页面上了解这些信息。 本页面向您展示了如何从头构建一个简单的表单。...每个Angular控制(NgControl)都跟踪自己的状态,并通过以下字段成员使状态可供检查: dirty和pristine表明控制的值是否已经改变。...刷新浏览,然后按照下列步骤操作: 1.看看名字输入。 它有一个绿色的边框。 它具有类形式控制和有效性。 2.通过添加一些字符来更改name。 类保持不变。 3.删除名称。 输入框边框变为红色。...当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。 概要 Angular表单为数据修改,验证等提供支持。...用于验证和表单元素更改跟踪的NgControl 指令。 输入控件(通过模板引用变量访问)的valid 属性,用于检查控件有效性以及显示/隐藏错误消息。

    17.5K30

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

    支持验证 客户端和服务之间的通讯便利 支持依赖注入 具有强大的功能,例如事件处理程序,动画等。...顾名思义,它们控制数据如何从服务流到HTML UI。 10. Angular的范围是什么? Angular中的范围是一个引用应用程序模型的对象。它是表达式的执行上下文。...Angular是否支持嵌套控制? 是的,Angular确实支持嵌套控制的概念。需要以层次方式定义嵌套控制,以便在视图中使用它。 17.如何区分Angular表达式和JavaScript表达式?...31.通过对Angular进行脏检查,您了解什么? 在Angular中,摘要过程称为脏检查。之所以调用它,是因为它扫描整个范围以进行更改。换句话说,它将所有新的作用域模型值与以前的作用域值进行比较。...DOM 物料清单 1.代表文档对象模型 1.代表浏览对象模型 2.表示网页的内容 2.在网页上方工作,并包含浏览属性 3.所有对象都以树状结构排列,并且只能通过提供的API来操作和访问文档 3.所有全局

    41.4K51
    领券