Form tools

Import 相依

import { UofxFormTools } from "@uofx/app-components/form";

使用方法

export class Page {
  form: FormGroup;

  constructor(private uofTool: UofxFormTools) {}

  sendClick() {
    this.uofTool.markFormGroup(this.form);
  }
}

可用函式

函式名稱	說明
markFormGroup	設定 FormGroup 的驗證狀態
resetFormValidators	重設 FormGroup 的驗證狀態
markFormControl	設定 FormControl 的驗證狀態
resetFormCtrlValidators	重設 FormControl 的驗證狀態

⚠️ 以上此功能亦可直接使用原生方式實作，是否使用此工具包可視團隊習慣與可讀性需求決定。

// markFormGroup 該函式實作
Object.keys(this.form.controls).forEach((key) => {
  const control = this.form.get(key);
  control.markAsDirty();
  control.markAsTouched();
  control.updateValueAndValidity();
});

// resetFormValidators
this.form.markAsPristine();
this.form.markAsUntouched();
this.form.updateValueAndValidity();

// markFormControl
this.form.controls.yourcontrol.markAsDirty();
this.form.controls.yourcontrol.markAsTouched();
this.form.controls.yourcontrol.updateValueAndValidity();

// resetFormCtrlValidators
this.form.controls.yourcontrol.markAsPristine();
this.form.controls.yourcontrol.markAsUntouched();
this.form.controls.yourcontrol.updateValueAndValidity();