首页 > 代码库 > [Angular] Create custom validators for formControl and formGroup
[Angular] Create custom validators for formControl and formGroup
Creating custom validators is easy, just create a class inject AbstractControl.
Here is the form we want to validate it:
form = this.fb.group({ store: this.fb.group({ branch: [‘‘, [Validators.required, StockValidators.checkBranch]], code: [‘‘, Validators.required] }), selector: this.createStock({}), stock: this.fb.array([]) }, {validator: StockValidators.checkStockExist});
We put two custom validators into this form, one is for formControl
StockValidators.checkBranch
Another is for formGroup:
{validator: StockValidators.checkStockExist}
Notice that for formControl validators, it takes array of validator.
For formGroup, it take object.
And here is the validators, it is important that make static methods, so we don‘t need to new the class instance:
import {AbstractControl} from ‘@angular/forms‘;export class StockValidators { static checkBranch(control: AbstractControl) { const branch = control.value; const regex = /^[a-z]\d{3}/i; return regex.test(branch) ? null: {branchCheck: true}; } static checkStockExist(control: AbstractControl) { const selector = control.get(‘selector‘).value; const selectedItems = control.get(‘stock‘).value; if(!selector && !selectedItems) return null; const exist = selectedItems.some((stock) => Number(stock.product_id) === Number(selector.product_id)); return exist ? {stockExist: true}: null; }}
When check on HTML side, we can create a helper function to make DOM looks shorter:
<div class="stock-selector__error" *ngIf="stockExists"> Item already exists in the stock </div>
get stockExists() { return ( this.parent.hasError(‘stockExist‘) && this.parent.get(‘selector.product_id‘).dirty ); }
[Angular] Create custom validators for formControl and formGroup
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。