我还在我的form group中添加了一个form group,并附上了form controls的required验证。My use case is:我想根据单个表单控件的值触发custom validation,如果自定义验证器返回为invalid,则将表单控件标记为有错误。My issue is that:一旦将form controls标记为错误,自定义< 浏览
Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@angular/core'; import {AbstractControl, NG_VALIDATORS, Validator} from'@angular/forms'; @Directive({ selector: `[formControl][no-special-chars], [formControlName][no-special-chars], [ngModel][no...
首先为 form 标签添加 formGroup 指令: 并且为 input 标签添加 formControlName 指令: 复制代码 代码如下: 3、在代码中定义验证规则: 从内置表单模块中导入以下类: import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 其中: 1. formBuilder 用来构建表单数据 2. formGroup 表示表单类型 3....
打开app.component.ts并用以下代码替换内容: import { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators } from '@angular/forms';import { ValidateUrl } from '../shared/url.validator';@Component({selector: 'app-root',templateUrl: './app.component.html',sty...
HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a series of built-in validators such asrequiredormaxLengthetc. But very soon you have to build your own custom validators to handle more complex ...
: DateTimePickerComponent; public formObject?: FormValidator; ngOnInit() { // custom validator function. let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => { return (((this.ejDateTime as DateTimePickerComponent ).value).getFull...
null : { custom: true }; } 复制代码 然后,在组件中将这个验证器函数应用到表单控件上: import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { customValidator } from './custom-validator'; @Component({ selector: 'app-my-...
通过代码可以看出,验证逻辑是通过一个自定义验证器来实现的,CustomFormValidators.passwordsMustMatch是一个静态方法,它接收两个控件的名称: passwordsMustMatch(password: string, confirmPassword: string) { return (formGroup: FormGroup) => { const control = formGroup.controls[password]; ...
// custom validator forbiddenText = 'test'; email = 'test@test.com'; emailFormControl = new FormControl('test@test.com', [Validators.forbidden(this.forbiddenText)]); } 完整代码可参见stackblitz demo。 所以,在理解了 Validator 内部运行原理后,不仅仅可以写自定义的 Validator,该 Validator 可以用于...
selector: `[formControl][no-special-chars], [formControlName][no-special-chars], [ngModel][no-special-chars]`, providers: [ { multi:true, provide: NG_VALIDATORS, useExisting: forwardRef(()=>NoSpecialCharsValidator) } ] }) export class NoSpecialCharsValidator implements Validator { ...