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

从angular 2中的表单验证器方法访问类变量

在Angular 2中,可以通过表单验证器方法访问类变量。表单验证器是一种用于验证表单输入的机制,可以确保用户输入的数据符合特定的规则和要求。

要从Angular 2中的表单验证器方法访问类变量,可以使用自定义验证器函数。自定义验证器函数是一个普通的JavaScript函数,它接收一个控件作为参数,并返回一个对象,其中包含验证结果。

首先,需要在组件类中定义一个类变量,以便在验证器方法中访问。例如,假设我们有一个名为password的类变量,可以在组件类中定义如下:

代码语言:typescript
复制
export class MyComponent {
  password: string;
}

然后,可以创建一个自定义验证器函数,该函数可以访问类变量password。例如,我们可以创建一个验证器函数来验证密码的长度:

代码语言:typescript
复制
export function passwordLengthValidator(control: AbstractControl): ValidationErrors | null {
  const password = control.value;
  const minLength = 8;

  if (password && password.length < minLength) {
    return { 'passwordLength': true };
  }

  return null;
}

在上面的代码中,passwordLengthValidator函数接收一个控件作为参数,并使用control.value获取控件的值。然后,我们可以访问类变量password并执行验证逻辑。如果验证失败,我们返回一个包含'passwordLength': true的对象,表示验证错误。

最后,我们可以将自定义验证器函数应用于表单控件。例如,假设我们有一个密码输入框的表单控件,可以在模板中使用Validators类的compose方法将自定义验证器函数与其他验证器组合起来:

代码语言:html
复制
<input type="password" formControlName="password" [class.invalid]="myForm.get('password').invalid && myForm.get('password').touched">
<div *ngIf="myForm.get('password').errors?.passwordLength">密码长度必须至少为8个字符。</div>

在上面的代码中,我们使用formControlName指令将表单控件与组件类中的password变量关联起来。然后,我们使用myForm.get('password').invalidmyForm.get('password').touched来检查控件是否无效并且已经被触摸过。如果是,我们添加一个invalid类来标记输入框为无效状态。同时,我们使用myForm.get('password').errors?.passwordLength来检查是否存在passwordLength错误,并显示相应的错误消息。

这只是一个简单的示例,演示了如何从Angular 2中的表单验证器方法访问类变量。根据具体的需求,可以创建更复杂的验证器函数,并在其中访问类变量来执行自定义的验证逻辑。

关于腾讯云相关产品和产品介绍链接地址,由于不能提及具体的品牌商,建议您访问腾讯云官方网站,查找与云计算相关的产品和服务。腾讯云提供了丰富的云计算解决方案,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。

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

相关·内容

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

入坑到弃坑 - Angular 使用入门 Angular 入坑到挖坑 - 组件食用指南 Angular 入坑到挖坑 - 表单控件概览 三、Knowledge Graph ?...之后,NgModel 指令通过更新控件 css ,达到反映控件状态目的 状态 发生时 css 没发生 css 控件被访问 ng-touched ng-untouched 控件值发生变化...4.2.3、数据有效性验证 某些时候需要对于用户输入信息做有效性验证,此时可以在控件上添加上原生 HTML 表单验证来设定验证条件,当表单控件数据发生变化时,angular 会通过指令方式对数据进行验证...同模板驱动表单数据有效性验证相同,在响应式表单中同样可以使用原生表单验证,在设定规则时,需要将模板中控件名对应数据值第二个参数改为验证规则 在响应式表单中,数据源来源于组件,因此应该在组件中直接把验证函数添加到对应...4.4、表单自定义数据验证 4.4.1、自定义验证 在很多情况下,原生验证规则无法满足我们需要,此时需要创建自定义验证来实现 对于响应式表单,我们可以定义一个方法,对控件数据进行校验,之后将方法作为参数添加到控件定义处即可

18.9K20

AngularDart4.0 指南- 表单

使用跟踪控件状态特殊CSS提供视觉反馈。 向用户显示验证错误并启用/禁用表单控件。 使用模板引用变量在HTML元素之间共享信息。 您可以在Plunker中运行实例(查看源代码)并从那里下载代码。...请注意提交按钮被禁用,并且输入控件绿色变为红色。 您将以小步骤构建此表单: 创建英雄模型。 创建控制表单组件。 用初始表单布局创建一个模板。...创建一个基本表单 一个Angular表单有两个部分:一个基于HTML模板和一个组件,以编程方式处理数据和用户交互。 课程开始,因为它简要地说明了英雄编辑可以做什么。...is-invalid替换为is-valid。 删除#spy模板引用变量和使用它诊断。 作为绑定替代方法,可以使用NgClass指令来设置控件样式。...概要 Angular表单为数据修改,验证等提供支持。 在此页面中,您学习了如何使用以下功能: 一个HTML表单模板和一个带有@Component注解表单组件

17.4K30

angular面试题及答案_angular面试

Angular中有三种方法可以做到这一点: Emulated : 样式其他HTML传播到组件。 Native : 来自其他HTML样式不会传播到组件。...Authorization(授权):登录成功后,经过身份验证或真正用户不能访问所有内容。用户未被授权访问其他人数据,他/她被授权访问某些数据。 16. AOT编译 和JIT编译?...ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件输入属性之后,初始化指令、组件 所以angular生命周期看,constructor是执行在先 所以既然ngOnchanges...DOM代表是网页内容。Bom包含dom, 它还包含有浏览属性。 Dom是一棵树结构,通过对应API来访问里面的数据。...最小化组件代码 不易于单元测试 Reactive Forms (响应式表单) 特点 比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离到组件

10.9K120

为什么Java中成员变量不能被重写?成员变量在Java中能够被重写么?不会重写成员变量,而是隐藏成员变量访问隐藏域方法

这篇文章讨论了Java面向对象概念中一个基本概念--Field Hiding(成员变量隐藏) 成员变量在Java中能够被重写么?...意思就是: 在一个中,子类中成员变量如果和父成员变量同名,那么即使他们类型不一样,只要名字一样。父成员变量都会被隐藏。在子类中,父成员变量不能被简单用引用来访问。...而是,必须从父引用获得父被隐藏成员变量,一般来说,我们不推荐隐藏成员变量,因为这样会使代码变得难以阅读。...其实,简单来说,就是子类不会去重写覆盖父成员变量,所以成员变量访问不能像方法一样使用多态去访问。...访问隐藏域方法 就是使用父引用类型,那么就可以访问到隐藏域,就像我们例子中代码 就是使用类型转换System.out.println(((Super)c1).s); 翻译自http://www.programcreek.com

3.5K40

Angular 6.x 表单快速入门

install -g @angular/cli 创建新项目 $ ng new project-name 启动本地服务 $ cd project-name $ ng serve Angular 表单简介...Driven 表单特点 使用方便 适用于简单场景 通过 [(ngModel)] 实现数据双向绑定 自动生成 Form Model (异步) 最小化组件代码 不易于单元测试 Reactive 表单特点...比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离到组件中 手动创建 Form Model (同步) 方便跟踪表单控件值变化 易于动态添加表单控件 易于单元测试 本文主要介绍...在 Angular 表单中,若验证通过则会在表单控件上添加 ng-valid ,若验证失败则会在表单控件上添加 ng-invalid 。...表单控制状态: valid - 表单控件有效 invalid - 表单控件无效 pristine - 表单控件值未改变 dirty - 表单控件值已改变 touched - 表单控件已被访问过 untouched

4.6K20

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库中FormGroup, FormControl,FormArray...,FormBuilder 等构建出数据对象就是响应式表单,在响应式表单中,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...) 表单验证 同步验证和异步验证 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4

2.8K50

Angular 2 表单(下)

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

1.6K10

【AngularJS】 # AngularJS入门

HTML 元素提供 CSS 绑定 HTML 元素到 HTML 表单 将输入域值($scope)与 AngularJS 创建变量绑定 <div ng-app="myApp" ng-controller...$error.email }} 如果输入Email值非法则为 true CSS,基于它们状态为 HTML 元素提供了 CSS <!...AngularJS SQL 使用 $http 后台请求数据,后端代码可以访问数据库,然后将结果以 json 形式返回 app.controller('sqlCtrl', function...表单实例 novalidate 属性是在 HTML5 中新增。禁用了使用浏览默认验证。...$dirty 表单有填写记录 $valid 字段内容合法 $invalid 字段内容是非法 $pristine 表单没有填写记录 基本表单验证实例,novalidate 用于禁用浏览默认验证

23.1K60

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

Razor组件在HTML中是完全呈现。 Razor库中Razor组件 现在可以将Razor组件添加到Razor库中,并使用Razor组件ASP.NET核心项目引用它们。...Forms&validation 此预览版本添加了用于处理表单验证内置组件和基础结构。 使用. net进行客户端web开发一个好处是能够在客户端和服务之间共享相同实现逻辑。...,并运行它,你将获得一个基本表单,该表单在字段更改和表单提交时自动进行字段输入值验证。...在本节中,我们将展示如何创建一个新Angular或React模板,该模板允许我们对用户进行身份验证访问受保护API资源。...应用程序访问页面时,要求对用户进行身份验证,我们将[AuthorizeGuard]应用到正在配置路由上。

22.6K10

AngularDart4.0 指南- 模板语法二 顶

他们列表中选择项目。 他们点击按钮。 这样用户操作可能导致数据流向相反方向:元素到组件。 了解用户操作唯一方法是侦听某些事件,例如按键,鼠标移动,点击和触摸。...class绑定是添加或删除单个方法。 <!...Angular为所有基本HTML表单元素提供值访问,Forms指南展示了如何绑定到它们。...您不能将[(ngModel)]应用到非表单原生元素或第三方自定义组件,除非您编写了一个合适值存取,这个技术超出了本指南范围。...和null属性路径 Angular安全导航运算符(?.)与Dart条件成员访问运算符一样,是防止属性路径中空值便利方法。 在这里,如果currentHero为空,则防止视图呈现失败。

29.9K20

Angular: 最佳实践

如果我们有一个 Order 类型变量,我们只能将这三个字符串中一个分配给 status 字段,分配其他类型 TS 编辑都会跑出错误。...在应用程序 tsconfig.json 文件中,我们可以设置这个标志,告诉编辑在未明确类型时候抛出错误。否则,编辑坚定它无法推断变量类型,而认为是 any 类型。...如果在你 Angular 组件中有个表单,你可能有像这样字段或者方法: @Component({ selector: 'component-with-form', template: `.....服务 Services 服务是 Angular 中业务逻辑存放和数据处理方案。拥有提供数据访问、数据操作和其他可重用逻辑结构良好服务非常重要。...模版到组件方法委托比原始逻辑更难。请注意,这里我用了比原始更难词语,而不是复杂这个词。这是因为除了检查直接条件语句之外,任何逻辑都应该写在组件方法中,而不是写在模版中。

2.8K40

给Java程序员Angular快速指南 | 洞见

语法上,装饰名字后面必须带括号,不能像注解那样省略。 不过,在 Angular 中,TypeScript 装饰实际用途就是为或属性添加注解而已。...服务与依赖注入 Angular 服务与依赖注入和 Spring 中很像,主要区别是 Angular 是个树状多级注入体系,注入树是和组件树一一对应,当组件要查找特定服务时,会该组件逐级向上查找...参见: https://angular.cn/guide/hierarchical-dependency-injection 表单验证 在前端程序中,验证主要是为了用户友好性,而不是安全。...安全是后端工作,不能因为前端做了验证而放松。 Angular表单提供了非常强力支持。...CORS 是标准化,但是受浏览兼容性影响较大;而反向代理则通过把 API “拉”到前端同一个域下,从根本上消除了跨域访问。 ?

2.3K41

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

组件封装 由于 Angular 为所有默认原生控件提供了控件值访问,所以在封装第三方插件或组件时,需要写一个新控件值访问。...所有表单指令都是使用NG_VALUE_ACCESSOR 标识来注入控件值访问,然后选择合适访问(译者注:这句话可参考这两行代码,L175 和 L181)。...要么选择DefaultValueAccessor 或者内置数据访问,否则 Angular 将会选择自定义数据访问,并且有且只有一个自定义数据访问(译者注:这句话参考 selectValueAccessor...我们直接在组件装饰里直接指定名,然而 Angular 源码默认实现是放在装饰外面: export const DEFAULT_VALUE_ACCESSOR: any = { provide:...当实现自定义 controlValueAccessor,我建议还是放在装饰里吧(译者注:个人建议还是学习 Angular 源码那样放在外面)。

3.7K20

Angularjs基础(七)

禁用了使用浏览默认验证。              实例解析           ng-app 指令定义了AngularJS 应用。           ...formCtrl 函数设置了mater 对象初始值,并定义了reset()方法。           reset() 方法设置了user 对象等于master对象。           ...novalidate 属性在应用中不是必须,但是你需要在 AngularJS 表单中使用,用于重写标准 HTML5 验证。...AngularJS输入验证     AngularJS表单和控件可以验证输入数据。 输入验证     AngularJS表单和控件可以提供验证功能,并对用户输入非法数据惊醒警告。...迭代对象       转换对象       全局 API 函数使用 angular 对象进行访问

2K70

angularjs 表单验证

二、表单中控制变量 屏蔽浏览表单默认验证行为 在表单元素上添加novalidate标记即可,问题是我们怎么知道我们表单有哪些字段是有效,那些事非法或者无效?...ng对此也提供了非常棒解决方案,表单属性可以在其所属$scope对象中访问到,而我们又可以访问$scope对象,因此JavaScript可以间接地访问DOM中表单属性。...$parsers  $parsers值是一个由函数组成数组,当用户同控制进行交互,并且ngModelController中$setViewValue()方法被调用时,其中函数在当用户同控制进行交互...ngModelDOM中读取值会被传入$parsers中函数,并依次被其中解析处理。这是为了对值进行处理和修饰。 备注:ngModel....value(字符串):value参数是我们想要赋值给ngModel实例实际值。 这个方法会更新控制上本地$viewValue,然后将值传递给每一个$parser函数(包括验证)。

6.6K70

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

学习ng道路还很漫长,模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层东西,大家都喜欢可以立马看得见东西嘛。...本篇我将搜罗模板中常用指令一一测试,了解其使用方法,有点像背单词感觉,会比较枯燥。...用来增强表单验证功能。   ...过滤器通常是伴随标记来使用,将你model中数据格式化为需要格式。表单控制功能主要涉及到数据验证以及表单控件增强。   在这里有必要说明一下表达式概念,毕竟我们模板中大部分使用都是变量。...文件并解析为DOM;   2) 浏览加载angular.js文件;   3) angular监听DOMContentLoaded 事件,监听到时开始启动;   4) angular寻找ng-app指令

2.9K20

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

启动 src是开发目录,生产打包后会产生一个dist目录; 初步说下你启动到浏览看到app works!...:组件逻辑处理 // 导入装饰:装饰可以理解为一些函数封装,使其书写起来非常简洁明了 import { Component } from '@angular/core';...; // 声明一个public变量并且赋值 }复制代码 app.module.ts:模块 // 浏览NG模块 import { BrowserModule } from...,ng2开发模式就是类似一个树,根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定...,src,class,style]等,双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量, (click)="": 事件绑定[视图触发改变数据源],同上,支持表达式和方法。。

6.2K20
领券