Angular2反应形式删除错误

Question

我正尝试设置窗体控制状态为有效

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

现在我想删除这个错误。

Answer 1

只需设置错误对象null值：

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

或者，如果你想作为意见建议，从控制使用setErrors(null)删除所有的验证。

Answer 2

其他的解决方案似乎不起作用。它看起来像角想起控制是无效的，只要错误属性不为null。

只要你想删除只是单一的错误，让别人有没有办法做到这一点，但手动。下面这个函数将删除只有一个参数强麦让别人指定的错误。它还将确保如果删除错误的控制将会是有效的。

// 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
        }
      }

随意编辑这个问题，并使其更具可读性。

免责声明：我测试了它 - 在角度6

Answer 3

据我所知，你真的不需要使用setErrors方法时，你可以创建custom validators。您可以轻松地创建自定义的验证器为您formControl或formGroup和您的验证中，你只需要返回ValidatorFn，你不应该使用setErrors方法。

有关FormGroup自定义验证的详细信息，我建议你读这article这解决了我的问题。

这是我工作的代码：

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)，其勾销整个误差的控制对象。

Answer 5

采用了棱角分明7，没有这里提出的解决方案，为我工作。

我不得不手动处理我的错误，我自定义的验证与多个表单域的作品。

下面检查例如，如果两个表单域之间的差足够大。有问题的表单字段有多个其他验证以及（LTE，GTE），所以清除所有的错误与SETERROR（空）是出了问题，并试图删除我的SETERROR特定错误（{minDifference：空}）永远离开该formControl处于无效状态。

minDifference(firstKey: string, secondKey: string, minDifference: number) {
  return (c: AbstractControl): {[key: string]: any} => {
    if (!c.get(firstKey).value || !c.get(secondKey).value ||
      Math.abs(c.get(firstKey).value - c.get(secondKey).value) >= minDifference) {
      // If there is only one error and it's this one then remove all errors from the control (removing 1 does not work)
      if (c.get(secondKey).hasError('minDifference')) {
        // If previously our error has been set, remove it.
        delete c.get(secondKey).errors.minDifference;
        // If no errors remain after, set the control to be valid.
        if (Object.keys(c.get(secondKey).errors).length === 0) {
          c.get(secondKey).setErrors(null);
        }
      }
      return null;
    }
    // Condition was not met, add our error to the alreadying existing ones.
    c.get(secondKey).setErrors( {...c.get(secondKey).errors, ...{ minDifference: true}} )
  }
}

说实话，我真的不喜欢我的解决方案，我希望能够解决这个简单得多，但无法找到一个方法来做到这一点。

Answer 6

如果您正在设置埃罗手动你可以使用的setValue（）再次将其有效。

if(myCurrency is smallerThanOther){
 this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true})
} else {
 this.currencyForm.controls['currencyMaxSell'].setValue(myCurrency);
}

Answer 7

你需要最好的答案在这里的评论混合和答案，以获得您的形式删除错误，并重新提交生效：

if (this.currencyForm.hasError("smallerThan")) {
 this.currencyForm.setErrors({
  "currencyMaxSell": null
  });
  this.currencyForm.updateValueAndValidity();
}

如果错误是在窗体上的一个特定的控制则包括表单控件：

if (this.currencyForm.controls.currencyMaxSell.hasError("smallerThan")) {
 this.currencyForm.setErrors({
  "currencyMaxSell": null
  });
  this.currencyForm.updateValueAndValidity();
}

Answer 8

刚刚尝试这一点：

const value = this.currencyForm.controls['currencyMaxSell'].value;
this.currencyForm.controls['currencyMaxSell'].patchValue();
this.currencyForm.controls['currencyMaxSell'].patchValue(value);

你有实际改变值一次，这样的形式控制将检查它是否有效。

Answer 9

仅去除一个形式控制误差使用.setErrors()用元件。

this.myFormGroup.get('myControl').setErrors(
)

这将删除只有一个元素的错误。