[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
    );
  }