[Angular2 Form] Model Driven Form Custom Validator
model Form Custom validator Angular2 driven
2023-09-14 08:59:19 时间
In this tutorial we are going to learn how simple it is to create custom form field driven validators while using Angular 2 model driven forms. These type of validators are really just plain functions that follow a set of conventions.
We are going to learn how to write a custom form validator and what the validating function needs to return in order to respect the Angular 2 form field validation contract.
Define a custom validator:
import {FormControl} from "@angular/forms"; export function validateDuration(ctrl:FormControl){ const numValue = parseInt(ctrl.value); const valid = numValue < 10; return valid ? null : { validateDuration: { valid: false, message: "Duration should less than 10" } } }
It just a function which return null or object, is it has error, it should return an object.
this.reactiveForm = fb.group({ ... duration: [ 0, [ Validators.required, //Validators.pattern('[0-9]+'), validateDuration ] ], ... });
We add 'validateDuration' into our validators array.
Use it:
<div class="form-field"> <label>Duration:</label> <input formControlName="duration"> <div *ngIf="reactiveForm.controls.duration.errors?.validateDuration"> {{reactiveForm.controls.duration.errors?.validateDuration.message}} </div> </div>
相关文章
- COM(Component Object Model)接口定义
- 关于 Laravel ORM 对 Model::find 方法进行缓存
- Neutron LBaaS Service(2)—— Neutron Services Insertion Model
- [Angular2 Form] Create custom form component using Control Value Accessor
- [Angular2 Form] Reactive form: valueChanges, update data model only when form is valid
- [ReactVR] Render Custom 3D Objects Using the Model Component in React VR
- [TypeScript] Model Alternatives with Discriminated Union Types in TypeScript
- [Angular2 Form] Create custom form component using Control Value Accessor
- [Angular 2] Adding a data model
- SAP UI5 Model destroy
- Implementation guide for Genil Model attributes set as Read-Only
- Atitit db model 数据库快速建模法 开发效率 目录 1. 结构(数据)设计 行为(处理)设计:1 2. 业务建模阶段1 2.1. Ui建模法,根据表单字段建立表字段2 2.2.
- SAP Gateway Service Builder 里的 OData Model 定义方式
- 【QML Model-View】ListView-增删改查(二)
- Qt model/view 架构
- pytorch之model.eval()
- 如何让django模型中的字段和model名显示为中文
- 条件DDPM:Diffusion model的第三个巅峰之作
- Diffusion Model 相关文章(图像生成方面)
- 【四】3D Object Model之创建Creation——clear_object_model_3d()/copy_object_model_3d()算子
- 【三】3D匹配Matching之可变形曲面匹配Deformable Surface—Based——find_deformable_surface_model()算子