0%

angular表单校验

发表于 更新于
本文字数： 1.6k 阅读时长 ≈ 1 分钟

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

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

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

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

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

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

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

    1
    // 表单字段校验
    2
    validateAllFormFields(formGroup: any) {
    3
        Object.keys(formGroup.controls).forEach(field => {
    4
          const control = formGroup.get(field);
    5
          if (control instanceof FormControl) {
    6
              control.markAsTouched({ onlySelf: true });
    7
          } else if (control instanceof FormGroup) {
    8
              this.validateAllFormFields(control);
    9
          } else if (control instanceof FormArray) {
    10
              this.validateAllFormFields(control);
    11
          }
    12
        });
    13
     }
    14
    15
    // 表单控件校验
    16
    isFieldInvalidTouched(field: any) {
    17
        return this.form.get(field).invalid && this.form.get(field).touched;
    18
    }
    19
    20
    // 表单控件校验
    21
    isArrayFieldInvalidTouched(index, field: any) {
    22
          return this.xxxArray.controls[index].get(field).invalid &&this.xxxArray.controls[index].get(field).touched;
    23
    }
    24
    25
    // 获取FormArray
    26
    get xxxArray(): FormArray {
    27
        return this.form.get('xxxArray') as FormArray;
    28
    }
    29
    30
    // 设置FormArray
    31
    set setXxxArray() {
    32
        // TODO
    33
    }
    34
    35
    // 表单提交
    36
    ensure() {
    37
        if (!this.form.valid) {
    38
            this.validateAllFormFields(this.form);
    39
            this.orderService.presentToast('表单信息不全, 请填写完整～');
    40
        } else {
    41
            // TODO
    42
        }
    43
    }