Angular2反应形式删除错误

Question

我正在尝试将表单控件状态设置为有效

this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true})

现在我要删除此错误.

Answer 1

其他解决方案似乎不起作用.只要errors属性不为null,看起来角度思维控制无效.

只要您想删除单个错误并留下其他错误,就无法手动执行此操作.下面的这个函数只会删除参数ale中指定的一个错误.它还将确保如果您删除错误,控件将变为有效.

// call it in validator function if control is valid
removeError(this.currencyForm.controls['currencyMaxSell'], 'smallerThan');

//this function removes single error
    function removeError(control: AbstractControl, error: string) {
      const err = control.errors; // get control errors
      if (err) {
        delete err[error]; // delete your own error
        if (!Object.keys(err).length) { // if no errors left
          control.setErrors(null); // set control errors to null making it VALID
        } else {
          control.setErrors(err); // controls got other errors so set them back
        }
      }

随意编辑此问题,使其更具可读性.

免责声明:我在ANGULAR 6中测试过它

Answer 2

只需将错误对象中的值设置为null:

this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: null})

或者,如果要setErrors(null)根据注释中的建议从控件中删除所有验证.

Answer 3

AFAIK,setErrors当您可以创建自定义验证器时,您真的不需要使用方法.您可以轻松地为formControl或formGroup创建自定义验证器,并且在验证器内只需要返回ValidatorFn,就不应该使用setErrors方法.

有关FormGroup的自定义验证器的更多信息,我建议您阅读本文解决了我的问题.

这是我的工作代码:

registerationForm = this.formBuilder.group({
  username: ['', [Validators.required, Validators.email]],
  passwords: this.formBuilder.group(
    {
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    },
    {
      validator: matchPassword
    }
  ),
  policyAgreement: ['', Validators.required]
});

// Outside my component:
const matchPassword = (group: FormGroup) => {
  const password = group.get('password').value;
  const confirmPassword = group.get('confirmPassword').value;
  return password != confirmPassword ? { matchPassword: true } : null;
};

Answer 4

要在执行手动验证时仅删除一个表单控件错误,请执行以下操作:

this.myFormGroup.get('myControl').setErrors({'myCustomError':null})

这将仅更新指定错误的值,并且不会删除您可能已执行的任何先前验证,而不setErrors(null)会使控件的整个错误对象无效.