[Angular] Custom validators驗證器設置方式

設置綁定
可以在formbuilder 上或是 formgroup上綁

如在service中

createForm() {

    this.serviceFormGroup = this.fb.group({  

      Empno: [''],

      CustomerAccount: [

        '',

        [

          Validators.required,

          Validators.pattern('^[0-9]*$'),

          Validators.minLength(7),

          Validators.maxLength(7),

        ],

      ],   

      FinancingStockAmount: [''],

      HighRiskControlMeasures: ['', [Validators.required]],

      HighRiskControlMeasuresNumber: [''],

      FundsList: this.fb.array([]),

      SecuritiesList: this.fb.array([]),

      ApplicantReason: ['', [Validators.required]],

    });

  }

或是如果像我的專案欄位是後端自動化apigen出來的
那就要另外設置綁定 像下面這樣


TS檔

this.formDataService.serviceFormGroup.controls.counterfst

      .get('fsT0180')

      .setValidators([

        RegexEmailValidator(

          new RegExp('[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}'),

        ),

      ]);

TS檔

  getErrorMessage(controlName: string) {

    // this.formDataService.getErrorMessage(controlName);

    const targetControl = this.FSTClientSideFormGroup.get(controlName);

     if (controlName === 'oooooooo') {

 else {      

      return targetControl.hasError('required')

        ? '必填'

        : targetControl.hasError('RegexNumber')

        ? '請輸入數字'

        : targetControl.hasError('idnoCheck')

        ? '請輸入正確的身分證字號'

        : targetControl.hasError('RegexEnglish')

        ? '請輸入英文'

        : targetControl.hasError('RegexChinese')

        ? '請輸入中文'

        : targetControl.hasError('RegexEngNum')

        ? 'Please enter English and Number'

        : targetControl.hasError('RegexEngAddress')

        ? 'Please enter the address correctly'

        : targetControl.hasError('idnoCheck')

        ? '身分證字號輸入不正確'

        : targetControl.hasError('RegexEmail')

        ? 'Email輸入不正確'

        : targetControl.hasError('minlength')

        ? '輸入長度不可小於' +

          targetControl.getError('minlength').requiredLength +

          '碼'

        : targetControl.hasError('maxlength')

        ? '輸入長度不可大於' +

          targetControl.getError('maxlength').requiredLength +

          '碼'

        : '';

    }

  }

而
.setValidators([])中會這樣寫

.setValidators([

        RegexEmailValidator(

          new RegExp('[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}'),

        ),

      ]);

是因為我directive是用這樣function格式來包裝，需要傳入regex



directive

import { ValidatorFn, AbstractControl } from '@angular/forms';

export function RegexEmailValidator(regex: RegExp): ValidatorFn {

  return (control: AbstractControl): { [key: string]: any } => {

    if (!control.value) {

      return null;

    }

    const valid = regex.test(control.value);

    return valid ? null : { RegexEmail: true };

  };

}

所以對應error message的 RegexEmail

   : targetControl.hasError('RegexEmail')

        ? 'Email輸入不正確'

並且在HTML中設定<mat-error>

  <mat-form-field>

                <input

                  matInput

                  placeholder="其他電郵地址"

                  formControlName="fsT0180"

                  [readonly]="disabledControlBCI0580()"

                />

                <mat-error

                  *ngIf="FSTClientSideFormGroup.get('fsT0180')?.invalid"

                  >{{ getErrorMessage('fsT0180') }}

                </mat-error>

              </mat-form-field>

輸入錯誤就會連動

        : targetControl.hasError('RegexEmail')

        ? 'Email輸入不正確'

就會有驗證提醒