zoukankan      html  css  js  c++  java
  • [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
        );
      }
  • 相关阅读:
    PyQT_Group
    单例模式演示-1-39-07
    RSqlBuilder
    RExcel
    RJson
    NodeJs开发目录
    NodeJs事件驱动
    NodeJs实用工具util
    NodeJs之global,process
    NodeJs两个简单调试技巧
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6702154.html
Copyright © 2011-2022 走看看