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
        );
      }
  • 相关阅读:
    转载【Ubuntu】Ubuntu14.04虚拟机调整窗口大小自适应VMware14窗口
    【ubuntu】安装输入法
    【虚拟机ubuntu】安装之后安装VMware tools
    【虚拟机ubuntu设置ssh】ssh连不上问题解决方法
    JavaScript常用函数
    Label自适应高度
    xcode 删除文件后编译会出现*** is missing from working copy
    找window的三种方法
    怎么查看Mac电脑的开机记录?
    iOS 跳转到系统的设置界面
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6702154.html
Copyright © 2011-2022 走看看