В одном из моих проектов у меня есть сценарий, в котором мне нужно пометить поле как правильное или неправильное в зависимости от другого поля.Я создал пример, чтобы иметь возможность задать такой вопрос здесь.
Основная проблема: я не могу изменить цвет состояния входа, изменив значение ДРУГОГО входа.
Для лучшего понимания проблемы я попытаюсь объяснить с помощью изображений:Шаг первый - я написал большее число на входе «Меньшее значение» и размыл его, и это показывает ожидаемую ошибку:
Шаг второй -Я написал большее число на входе «Большое число» и размыл его, поэтому я ожидаю, что значение SMaller Value будет зеленым, но оно останется красным:
Чего я хотел бы добиться: всякий раз, когда меньшее значение больше, его вход окрашивается в красный цвет, а всякий раз, когда меньшее значение меньше, его вход окрашивается в зеленый цвет.
И это работает, когда я меняюзначение Меньшего значения и размытие ввода.Однако, например, когда я пишу меньшее число на входе «Большое число» и размываю его, вход «Меньшее значение» не окрашивается в красный цвет, если раньше он был зеленым.
Это моя форма и функция валидатора:
this.thisForm = new FormGroup({
smallerValue: new FormControl('', [
this.validateSuccessShortName.bind(this)
]),
biggerNumber:new FormControl('', [
Validators.required
])
});
}
validateSuccessShortName(control: AbstractControl) {
if (parseInt(control.value,10) > parseInt(this.biggerNumber, 10)) {
return {value: control.value};
}
return null;
}
Я написал эту функцию, чтобы попытаться запустить проверку вручную, и она запускает проверку, просто вход большего числа не может изменить состояние проверки меньшего входа:
updateFields(){
for (const field in this.thisForm.controls) {
this.thisForm.controls[field].updateValueAndValidity();
}
}
Вот STACKBLITZ , который демонстрирует проблему.
Если вам нужна дополнительная информация, пожалуйста, дайте мне знать!