Question

我有一个包含4种不同表单控件的表单：

this.form = this.formBuiler.group({
    controlOne: ['', Validators.required],
    controlTwo: ['', Validators.required],
    controlThree: ['', Validators.required],
    controlFour: ['', Validators.required]
});

我还收到了来自服务的响应，该服务是与表单对象的一对一映射。响应中的键是布尔值，指示是否应将相应的表单控件标记为无效：

{
    controlOneBoolean: true,
    controlTwoBoolean: false,
    controlThreeBoolean: false,
    controlFourBoolean: true
}

我想使用来自后端的此状态来相应地设置表单状态，并且想知道是否存在一种干净的方法。我当时在考虑可能会遍历两个对象并将form.get(key).invalid属性设置为相应的值。

有什么建议吗？

Answer 1

您可以使用setErrors方法来设置与表单控制器相对应的错误。但是在您的情况下，响应对象键在与表单控件名称比较时包含Boolean作为后缀，因此请删除该部分并根据值应用错误。

// assumes validation results in variable `err`

// iterate over the errors
Object.entries(err).forEach(([name, bool]) => {
  // check value is true or false
  // if your condition satisfies set error on controller
  // to get control name remove last 7 character
  if (!bool) this.form.controls[name.slice(0, -7)].setErrors({
    'invalid': true
  });
})

Answer 2

我们可以使用formControls setError方法来设置来自后端服务的状态。

您可以使用

this.form.get('controlname').setErrors(controlBooolean ? 'valid': true : 'valid': false )

当然，您必须迭代获得的响应，这里 controlBooolean 是来自后端响应的单个项

Answer 3

如果要添加验证，请尝试此验证。

设置 FormGroup中控件的验证器：

this.form.get('controlName').setValidators([Validators.required]);

FormGroup

删除：

this.form.controls['controlName'].clearValidators()

设置来自后端响应的对象的表单状态

3 个答案: