angular表单校验

2019-04-18  本文已影响0人  窗外的雪儿飞

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


表单校验提示

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

  1. 对Angular内置的表单css属性设置想要的样式
// css样式
.isvalid {
    border: 1px dashed red !important;
}
  1. 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="请输入收件人姓名">
  1. 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
    }
}
上一篇下一篇

猜你喜欢

热点阅读