Question

我想在提交后转储所有表单控件错误。每次我必须检查每个输入就像

this.form.controls['client_id'].errors;
this.form.controls['student'].errors

这会产生单一错误。但我需要像

这样的单个对象中的所有错误

{
  client_id: {
    'required': true
  },
  student: {
    'maxlength': {
      'requiredLength': 2,
      'actualLength': 6
    },
    'email': true
  }
}

我知道angular提供了一些形式的技术，如value，status，pristine等等。但我提交后没有找到任何技术来显示所有错误对象

Answer 1

只要原始库未附带此功能，您就可以创建一个小型子库来执行此操作。您需要的是扩展返回错误的原始类。

import { AbstractControl, FormArray, FormGroup as OriginalFormGroup } from '@angular/forms';

class FormGroup extends OriginalFormGroup {

  // create a getter allErrors
  // returns an object of sub-controls' errors
  get allErrors() { 
    return Object
      .keys(this.controls) // go through all the control names
      .reduce((result, name) => {
        const control = <FormGroup | AbstractControl>this.controls[name];

        // if control is FormGroup recursively call its `allErrors`
        if (control instanceof FormGroup) {
          result[name] = control.allErrors;
        } else if (control instanceof FormArray) {
          // add implementation for array here
        } else {
          // for normal controls add errors here
          result[name] = control.errors;
        }

        return result; // and return the result to the next control
      }, {});
  }

}

（可能您也希望版本的FormArray和FormControl）

终于有时间使用它了

import { FormGroup } from './my-forms';

this.form = new FormGroup() // all as usually but using your FormGroup

console.log(this.form.allErrors)

实现并不完整，我甚至不确定您是否可以按原样使用它，但是它显示了处理原生Angular反应形式的任何自定义的方法。

在以角度提交反应形式后是否有可能获得所有错误

1 个答案: