Question

我想要一种方法从表单控件中删除特定错误，而不是清除所有错误。

control.setError({'firstError': true})

并删除

之类的特定错误

control.removeError({'firstError}) and not control.setError({null})

我试过

control.setError({'firstError': false})

但没有用。

任何帮助。感谢

棱角分明4.1.1

Answer 1

您可以使用以下方法消除错误：

control.setError({'firstError': null});

control.updateValueAndValidity();

Answer 2

你可以这样删除：

control.setError({'firstError': null})

Answer 3

此问题的其他帖子中已有很多说明（例如，删除错误属性（仍将控件标记为invalid），updateValueAndValidity()中的changeHandlers问题（无穷大）循环）等）。综上所述，我现在使用下面的小功能，该功能使其他错误保持不变，并且如果没有其他错误，则重置无效标志：

removeFormControlError(control: AbstractControl, errorName: string) {
  if (control?.errors && control?.errors[errorName]) {
    delete control.errors[errorName];
    if (Object.keys(control.errors).length === 0) {
      control.setErrors(null);
    }
  }
}

Answer 4

首先，您应该检查您的字段是否有此错误。接下来，将其删除。最后，您需要更新控件中的所有错误。

验证器函数中的此类内容：

if (control.hasError('firstError')) {
      delete control.errors['firstError'];
      control.updateValueAndValidity();
    }

致谢。

Answer 5

我来自这个github issue，并尝试了这种小解决方法?

使用Destructuring assignment

if ( control.hasError('errorToRemove') ) {
  const { errorToRemove, ...errors } = control.errors;
  control.setErrors(errors);
  control.updateValueAndValidity();
}

您还可以尝试使用omit或pick lodash函数来分别省略或选择一系列错误，然后可以在控件中设置这些错误。

const errors = pick(control.errors, ['onlyErrorsToKeep']);
control.setErrors(errors);
control.updateValueAndValidity();

const errors = omit(control.errors, ['allErrorsToRemove']);
control.setErrors(errors);
control.updateValueAndValidity();

Answer 6

不幸的是，它对我没用。我只使用updateValueAndValidity()来重新计算值和验证。以下是我的验证函数，它验证了我的grossWeight。

validateWeights(formGroup) {
    let netWeight = formGroup.get('netWeight');
    let grossWeight = formGroup.get('grossWeight');

    if (parseFloat(netWeight.value) > parseFloat(grossWeight.value)) {
        grossWeight.setErrors({ 'customError': true });
        netWeight.setErrors({ 'customError': true });
    } else {
        if(netWeight.errors && netWeight.errors['customError']) {
            netWeight.updateValueAndValidity();
        }
        if (grossWeight.errors && grossWeight.errors['customError']) {
            grossWeight.updateValueAndValidity();
        }
    } 
}

Answer 7

control.setErrors({'firstError': null});

将不再工作。您需要使用辅助方法。从https://github.com/angular/angular/issues/21564#issuecomment-480569715

复制

public static removeErrors(keys: string[], control: AbstractControl) {
  if (!control || !keys || keys.length === 0) {
    return;
  }

  const remainingErrors = keys.reduce((errors, key) => {
    delete errors[key];
    return errors;
  }, { ...control.errors });

  control.setErrors(remainingErrors);

  if (Object.keys(control.errors || {}).length === 0) {
    control.setErrors(null);
  }
}

Answer 8

如果从Angular 8开始我们动态地添加和删除错误，则以上示例完全无效。我正在根据其他控件的状态添加错误。即我有两个使用相同电子邮件地址定义的客户。这是我能找到的唯一可行的解决方案。

tap(duplicateError => {
    /* Note to future self...
     * I'm beginning to hate AbstractControl.errors.
     * The email control can have multiple errors (required, email, and duplicate);
     * The ONLY way to clear an error is to not have it in the object that is passed to the setErrors call.
     * You CANNOT pass null or undefined! It will still be evaluated as an error!
     * This is also true if there are NO errors AT ALL. You cannot pass setErrors({}) or the control will be
     * invalid, even though there are no errors! You must call setErrors(null);
     * This is stupid, but it's the only way it works.
     * This code is concerned with setting/removing the duplicate error.
     */
    const email = this.form.get('email');
    // Clone the existing errors
    const existingErrors = { ...email.errors };
    // Ensure that duplicate error is removed (we're in the change handler for the duplicate error)
    delete existingErrors.duplicate;
    if (duplicateError) {
        // We have a new duplicate error, so add it.
        email.setErrors({ ...existingErrors, duplicate: duplicateError.errorMessage });
    } else if (Object.keys(existingErrors).length === 0) {
        // We have NO errors, so pass null
        email.setErrors(null);
    } else {
        // We have existing errors, but no new duplicate error. Pass the existing errors.
        email.setErrors(existingErrors);
    }
    this.changeDetector.markForCheck();
})

Answer 9

我正在使用动态表单，我想清除一个组件与另一个组件之间的错误。我尝试了 .setErrors（）方法，但是它不起作用。下面列出了适用于我的解决方案。

clearControlError( control: AbstractControl ): void {
    const err = control.errors;
    if (err) {
        delete err['timeNotValid'];
        if (!Object.keys(err).length) {
            control.setErrors(null);
        } else {
            control.setErrors(err);
        }
    }
}

现在，我可以通过将任何AbstractControl类型的控件传递给这样的函数来清除错误。

this.clearControlError(this.formBase.parent.get('startTime'));

或

this.clearControlError(this.form.controls['startTime']);

Answer 10

this.form.controls["field"].setErrors(null);

Answer 11

我遇到此错误是由于使用* ngIf显示某些控件引起的。我想删除所有错误并从头开始，这行得通：

Object.keys(this.myForm.controls).forEach(controlName => {
  if (controlName != "search") {
    let control = that.myForm.controls[controlName];
    if (control.errors) {
      let errorKeys = Object.keys(control.errors);
      errorKeys.forEach(key => {
        delete control.errors[key];
      })
    }
    control.setErrors(null);
    this.options[controlName + "Error"] = null;
  }
});

在我的代码中，我想单独保留“搜索”控件，并且我还要清除保存在this.options中的错误字符串。{controlName}错误

Answer 12

要清除所有验证，您可以使用如下所示的 markAsUntouched 函数。例如表单组控件：

for (let controlsKey in this.formGroup.controls) {
      let control = this.formGroup.controls[controlsKey];
      control.markAsUntouched();
}

角度抽象控件删除错误

12 个答案: