角度抽象控件删除错误

时间:2017-07-13 00:32:44

标签: angular

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

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

并删除

之类的特定错误
control.removeError({'firstError}) and not control.setError({null})

我试过

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

但没有用。

任何帮助。感谢

棱角分明4.1.1

12 个答案:

答案 0 :(得分:14)

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

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

control.updateValueAndValidity();

答案 1 :(得分:6)

你可以这样删除:

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

答案 2 :(得分:6)

此问题的其他帖子中已有很多说明(例如,删除错误属性(仍将控件标记为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);
    }
  }
}

答案 3 :(得分:5)

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

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

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

致谢。

答案 4 :(得分:4)

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

使用Destructuring assignment

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

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

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

答案 5 :(得分:1)

不幸的是,它对我没用。我只使用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();
        }
    } 
}

答案 6 :(得分:1)

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);
  }
}

答案 7 :(得分:0)

如果从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();
})

答案 8 :(得分:0)

我正在使用动态表单,我想清除一个组件与另一个组件之间的错误。我尝试了 .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']);

答案 9 :(得分:0)

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

答案 10 :(得分:0)

我遇到此错误是由于使用* 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}错误

答案 11 :(得分:0)

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

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