FormArray 的垂直自定义验证器

如何解决FormArray 的垂直自定义验证器

我希望总数精确到 100。但是这个验证器不起作用。我的代码有什么问题？

export class CustomValidators { 
  public static verticalTotal(total: number,refControl: string) {
    return (control: FormArray): ValidationErrors | null => {
      const arrayValue = control.value || [];
      let actualTotal = 0;
      control.controls.forEach(ctrl => {
        actualTotal += +(ctrl.get(refControl).value);
     });
  return actualTotal !== total ?
     { verticalTotal: true,message: `Total should be ${total},not ${actualTotal}`
     } : null;
    };
   } 
}

我像这样应用验证器

 this.itemForm = this.fb.group({
  subsidiaries: this.fb.array([],{
    validators: [CustomValidators.verticalTotal(100,'percent')]
  })
},{ validators: [] });

const line = this.fb.group({
  'name': ['',[]],'percent': [0,[]]
});
(this.itemForm.get('subsidiaries') as FormArray).push(line);

this.itemForm.get('subsidiaries').updateValueAndValidity();

解决方法

谢谢@Eliseo 你是对的。我的代码有效。除了我返回的对象不包含消息的定义。应该是

   {
    verticalTotal: { valid: false,message: `Total should be ${total},not ${actualTotal}`}
    } : null;

而不是我的代码中的内容。这样我就可以在组件模板中设置错误信息。

编辑：我修改的另一件事是使用值，而不是 actualTotal += +(ctrl.get(refControl).value);。这是修改后的部分

 arrayValue.forEach(ctrl => {
    actualTotal += +(ctrl[refControl]);
  });