Angular 2 跨字段验证（基于模型）addErrors？答案

【问题标题】：Angular 2 Cross Field Validation (model based) addErrors?Angular 2 跨字段验证（基于模型）addErrors？
【发布时间】：2016-12-08 16:03:43
【问题描述】：

我正在对表单中的两个字段进行跨字段验证（反应式/基于模型的方法），但不知道如何将错误添加到表单控件的现有错误列表中

表格：

this.myForm = new FormGroup({
  name: new FormControl('', Validators.minLength(3));
  city: new FormGroup({
    cityOne: new FormControl('', Validators.minLength(3)),
    cityTwo: new FormControl('', Validators.minLength(3))
  }, this.validateEqualCities)
});

验证器：

validateEqualCities(formGroup: FormGroup) {
    return (control: AbstractControl): { [key: string]: any } => {
    if (formGroup.controls['cityOne'].value &&  formGroup.controls['cityTwo'].value && formGroup.controls['cityOne'].value !== formGroup.controls['cityTwo'].value) {

     formGroup.controls['cityOne'].setErrors({ 'equalCities': true }, { emitEvent: true });
     formGroup.controls['cityTwo'].setErrors({ 'equalCities': true }, { emitEvent: true });

        return { 'equalCities': false };

    } else {
      formGroup.controls['cityOne'].updateValueAndValidity({ onlySelf: true, emitEvent: false });
      formGroup.controls['cityTwo'].updateValueAndValidity({ onlySelf: true, emitEvent: false });
    }

    return null;
    };
  }

我的问题：如果验证失败，"setErrors(..)" 会覆盖所有已经存在的错误（formControls 的验证器），因此没有正确的状态，因为实际上应该有 2 个错误。

如果我没有直接给表单控件设置错误，只向表单返回错误，那么只有表单无效并得到错误，而不是它的控件。

如何实现表单和控件都具有真实的验证状态？

非常感谢！

【问题讨论】：

标签： forms validation angular form-control

【解决方案1】：

您可以在分配错误、修改它并将整个对象写回之前捕获错误对象。

validateEqualCities(formGroup: FormGroup) {
  return (control: AbstractControl): { [key: string]: any } => {
    if (formGroup.controls['cityOne'].value &&  formGroup.controls['cityTwo'].value && formGroup.controls['cityOne'].value !== formGroup.controls['cityTwo'].value) {
      let errors = formGroup.controls['cityOne'].errors ? formGroup.controls['cityOne'].errors : {};
      errors['equalCities'] = false;
      formGroup.controls['cityOne'].setErrors(errors, { emitEvent: true });

      errors = formGroup.controls['cityTwo'].errors ? formGroup.controls['cityTwo'].errors : {};
      errors['equalCities'] = false;

      formGroup.controls['cityTwo'].setErrors(errors, { emitEvent: true });

      return { 'equalCities': false };
    <...>

这是一个带有工作演示的 Plunker：http://plnkr.co/edit/XTeH1ifQTJSoMvBEvE0d?p=preview

【讨论】：

看起来不错，我想到了解决方案并问自己这看起来像是某种 hack，没有其他更优雅/原生的解决方案吗？不过还是谢谢你！
不是真的，如果你正在做一个明确的集合，就没有办法添加一个错误（我知道，没有办法让组应用的错误级联下来）所以这很漂亮你得到了什么。