送出前驗證

表單送出前的欄位驗證分為兩種，一是前端驗證，另一種是透過 API 等待結果決定是否可以送出。

設定前端驗證

可以透過「Angular」原本就支援的基本驗證或是使用 UOF X 元件的Validators 共用驗證元件，也可自訂欄位的驗證函式，設定在欄位初始化之後。

表單按下送出時，前端會先檢查parentForm是否通過驗證，而selfControl屬於parentForm的其中一個 control，所以當selfControl驗證不過的時候，會直接阻擋parentForm驗證。

advance-field.write.component.ts

initForm() {
  console.log('initForm', this.exProps);
  this.form = this.fb.group({
    'empNo': [this.value?.empNo ?? '', Validators.required],
    'mobile': [this.value?.mobile ?? '', [createMobileValidator(), Validators.minLength(10)]],
    'applyDate': [this.value?.applyDate, [Validators.required, createApplyDateValidator(this.exProps.checkDays)]]
  });

  // 表單送出時的前端驗證
  if (this.selfControl) {
    // 在此便可設定自己的驗證器
    this.selfControl.setValidators(validateSelf(this.form));
    this.selfControl.updateValueAndValidity();
  }
}    

顯示欄位內的驗證失敗訊息

此功能目前僅 Web 提供。

由於使用 uofx-form-error-tip 需要在 control.dirty 為 true 的情況下才會顯示，可以在 ngOnInit() 時呼叫 parentFormBinding()，這樣在驗證失敗時，會一併將自定義的表單 markAsDirty。

使用方式如下：

import { Component } from '@angular/core';
import { UofxFormFieldLogic } from '@uofx/web-components/form';

@Component({
  ...
})
export class LogicDemo {
  form: FormGroup;

  constructor(private logic: UofxFormFieldLogic)

  ngOnInt() {
    ...

    this.logic.parentFormBinding(this.parentForm, this.selfControl, this.form);
  }
}

設定對應的欄位值

此功能目前僅 Web 提供。

當欄位資料異動時，更新 selfControl，讓跨欄位存取可拿到最新的資料。

import { Component } from '@angular/core';
import { UofxFormFieldLogic } from '@uofx/web-components/form';

@Component({
  ...
})
export class LogicDemo {
  form: FormGroup;

  constructor(private logic: UofxFormFieldLogic)

  ngOnInt() {
    ...

    this.formSubscription$ = this.form.valueChanges.subscribe(res => {
      this.formFieldLogic.setSelfControlValue(this.selfControl, this.form, res);
    });
  }
}

設定後端驗證

表單本身的設計驗證分成兩段，確定前端驗證都通過後，才會在下個階段前進行後端 API 驗證。

checkValidator設定按下表單下方按鈕時是否要檢查表單驗證。

在欄位填寫模式內實作 checkBeforeSubmit()，回傳結果Promise<boolean>，resolve(true)表示通過驗證，resolve(false)表示未通過驗證，回傳false會阻擋表單送出。

advance-field.write.component.ts

/** 表單submit前要做的檢查 */
checkBeforeSubmit(checkValidator: boolean): Promise<boolean> {
  return new Promise(resolve => {
    const value = this.form.value;
    console.log(value);

    if (checkValidator) {
      // 如果要檢查表單驗證且表單 invalid，回傳 false 阻擋表單送出
      this.form.invalid ? resolve(false) : resolve(true);
    } else {
      // 表單不須驗證，直接回傳 true 暫存表單
      resolve(true);
    }
  });
}

在暫存狀態下，不需要驗證欄位資料

此功能目前僅 Web 提供。

checkBeforeSubmit 時如果是暫存就不需驗證必填，會清除所有 control error。

import { Component } from '@angular/core';
import { UofxFormFieldLogic } from '@uofx/web-components/form';

@Component({
  ...
})
export class LogicDemo {
  form: FormGroup;

  constructor(private logic: UofxFormFieldLogic)

  checkBeforeSubmit() {
    ...

    this.formFieldLogic.checkValidators(checkValidator, this.selfControl, this.form);
  }
}