Я пытаюсь установить статус управления формой на допустимый
this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true})
теперь я хочу удалить эту ошибку.
Я пытаюсь установить статус управления формой на допустимый
this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true})
теперь я хочу удалить эту ошибку.
Другие решения, кажется, не работают. Похоже, угловое управление мышлением недопустимо, если свойство ошибок не равно нулю.
До тех пор, пока вы хотите удалить только одну ошибку и оставить других, нет способа сделать это, кроме как вручную. Эта функция ниже удалит только одну ошибку, указанную в аргументе 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
}
}
Не стесняйтесь редактировать этот вопрос и сделать его более читабельным.
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я ПРОВЕРИЛ ЭТО В 6-М УГЛУ
Просто установите значение в объекте ошибки null
:
this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: null})
Или, если вы хотите удалить все проверки из элемента управления, используйте setErrors(null)
, как это предлагается в комментариях.
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;
};
Чтобы удалить только одну ошибку управления формой при выполнении ручной проверки, выполните следующие действия:
this.myFormGroup.get('myControl').setErrors({'myCustomError':null})
Это только обновит значение указанной ошибки и не удалит предыдущую проверку, которую вы могли бы сделать, в отличие от setErrors(null)
, которая сводит на нет весь объект ошибок для элемента управления.
Используя Angular 7, ни одно из представленных здесь решений не помогло мне.
Мне пришлось обработать мою ошибку вручную в моем пользовательском валидаторе, который работает с несколькими полями формы.
В приведенном ниже примере проверяется, достаточно ли велика разница между двумя полями формы. В рассматриваемых полях формы также есть несколько других валидаторов (lte, gte), поэтому очистка всех ошибок с помощью setError (null) была исключена, и попытка удалить мою конкретную ошибку с помощью setError ({minDifference: null}) всегда оставляла 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 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}} )
}
}
Честно говоря, мне не очень нравится мое решение, я ожидал, что смогу решить это намного проще, но не смог бы найти способ сделать это.
Если вы устанавливаете ошибку вручную, вы можете использовать setValue(), чтобы снова сделать ее действительной.
if(myCurrency is smallerThanOther){
this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true})
} else {
this.currencyForm.controls['currencyMaxSell'].setValue(myCurrency);
}
Вам понадобится сочетание лучшего ответа здесь и ответа в комментариях, чтобы ваша форма могла устранить ошибку и стать действительной для повторной отправки:
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();
}
Просто попробуйте это:
const value = this.currencyForm.controls['currencyMaxSell'].value;
this.currencyForm.controls['currencyMaxSell'].patchValue();
this.currencyForm.controls['currencyMaxSell'].patchValue(value);
Вы должны фактически изменить значение один раз, чтобы fromControl проверил, является ли оно действительным или нет.
В дополнение к тому, что предложил @karoluS, вы можете просто использовать:
delete control.errors.errorName;
Так что в вашем случае:
delete this.currencyForm.controls['currencyMaxSell'].errors.smallerThan;
Чтобы удалить только одну ошибку управления формой, используйте .setErrors()
с элементом.
this.myFormGroup.get('myControl').setErrors(
)
Это удалит только одну ошибку элемента.