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
        );
      }
  • 相关阅读:
    update set from 语句用法
    SQL WITH AS用法
    SQL插入数据的多种方式
    本地临时表“#” 与 全局临时表 "##"
    sql常用语句
    关于mybatis转义SQL动态执行语句变慢的原因
    关于SQL中OUTER APPLY 得用法
    AspNetPager控件的简单使用
    JQuery常用的案例
    JQuery的学习笔记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6702154.html
Copyright © 2011-2022 走看看