angular表单校验

最近在写项目的时候，产品要求对表单的必填输入项进行友好的校验提示，效果如图：

表单校验提示

" 这个需求很简单，怎么实现我不管。 " ，还能说什么，就是干，具体实现如下：

1. 对Angular内置的表单css属性设置想要的样式

// css样式
.isvalid {
    border: 1px dashed red !important;
}

2. html文件里设置即时样式检测[class.isvalid]

<!--非formArray-->
<input formControlName="addressName [class.isvalid]="isFieldInvalidTouched('addressName')" type="text" placeholder="请输入收件人姓名">
<!--formArray-->
<input formControlName="addressName [class.isvalid]="isArrayFieldInvalidTouched(i, 'addressName')" type="text" placeholder="请输入收件人姓名">

3. ts文件里注入核心方法

// 表单字段校验
validateAllFormFields(formGroup: any) {
    Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);
      if (control instanceof FormControl) {
          control.markAsTouched({ onlySelf: true });
      } else if (control instanceof FormGroup) {
          this.validateAllFormFields(control);
      } else if (control instanceof FormArray) {
          this.validateAllFormFields(control);
      }
    });
 }

// 表单控件校验
isFieldInvalidTouched(field: any) {
    return this.form.get(field).invalid && this.form.get(field).touched;
}

// 表单控件校验
isArrayFieldInvalidTouched(index, field: any) {
      return this.xxxArray.controls[index].get(field).invalid &&this.xxxArray.controls[index].get(field).touched;
}

// 获取FormArray
get xxxArray(): FormArray {
    return this.form.get('xxxArray') as FormArray;
}

// 设置FormArray
set setXxxArray() {
    // TODO
}

// 表单提交
ensure() {
    if (!this.form.valid) {
        this.validateAllFormFields(this.form);
        this.orderService.presentToast('表单信息不全, 请填写完整～');
    } else {
        // TODO
    }
}