Angular Reactive Forms 自订表单验证器

中秋连假开始啦，先祝大家中秋节快乐!!
接连着前两天的日记文插播，
今天就接续着先前还没聊完的部份开始接续下去罗

有表单当然少不了验证，这次的情境是

名字是必填栏位。
手机不一定会是必填，但填了後必须符合手机的格式，09 开头共 10 码

来罗！！

加上表单验证

在这个 form 表单的下方新增一个验证方式，动态验证就写在 validator 这里面

export class FormComponent implements OnInit {
  form: FormGroup = new FormGroup(
    {
      name: new FormControl("", Validators.required),
      phone: new FormControl(""),
      favorites: new FormArray([]),
    },
    { validators: validator }
  );
}

自订验证器

.ts

export const validator: ValidatorFn = (
  control: AbstractControl
): ValidationErrors | null => {
  const { name, phone, favorites } = control.value;
  // 手机号码正规化
  const regPhone = RegExp(/^09[0-9]{8}$/);
  return !phone ? null : regPhone.test(phone) ? null : { phone: true };
};

若是号码填写错误，把 form 的 console 叫出来会是像图上这样

一开始我们有设定名字为必填，图上红色框起来就是没填到名字所出现的讯息

若无误则会是 null，这样我们就可以在 tmeplate 上做显示让使用使知道表单哪里有问题

把错误讯息 show 出来！

在 html 里加上错误讯息

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="">name：</label>
    <input formControlName="name" type="text" />
    <!-- 错误讯息判断 -->
    <p style="color:red" *ngIf="form.get('name')?.errors?.required">
      Name Required
    </p>
  </div>
  <div>
    <label for="">phone：</label>
    <input formControlName="phone" type="tel" />
  </div>
  ...略
  <!-- 错误讯息判断 -->
  <p style="color:red" *ngIf="form.errors?.phone">Your phone Error</p>
  <button type="submit">Submit</button>
</form>

下图为判断 form 里的验证讯息，来决定要不要让表单送出