РЕДАКТИРОВАТЬ:
Отредактировано с тем же решением реактивный путь.Поэтому создайте группу форм и добавьте собственный валидатор, присоединенный к группе форм:
_issueCategory = { lowScore: 1, highScore: 2 };
issueThresholdForm: FormGroup;
constructor(private fb: FormBuilder) {
this.issueThresholdForm = this.fb.group({
highScore: [this._issueCategory.highScore, [Validators.required]],
lowScore: [this._issueCategory.lowScore, [Validators.required]]
}, { validators: validateScore })
}
Функция валидатора:
export function validateScore(
control: AbstractControl
): ValidationErrors | null {
if (control && control.get("highScore") && control.get("lowScore")) {
const highscore = control.get("highScore").value;
const lowscore = control.get("lowScore").value;
return (lowscore > highscore) ? { scoreError: true } : null
}
return null;
}
Затем вы можете удалить ngModel (важно!), Так как они не должны бытьсмешивается с реактивными формами.Также вы можете удалить все проверки, такие как required для формы, поэтому в конце вход может выглядеть просто:
<input type="number" matInput placeholder="0" formControlName="lowScore">
STACKBLITZ
ОРИГИНАЛ:
Я сильно, сильно предлагаю Реактивные формы , они могут чувствовать себя сбивающими с толкусначала, но оно того стоит.Вы лучше контролируете форму, и, как уже упоминалось в комментарии Нитина Кумара Билия, модульное тестирование проще.
При этом ....
Вот решение с использованием шаблонно-управляемой формы, поскольку это то, что вы в настоящее время используете.
Вы можете создать директиву, которую вы прикрепляете к тегу формы, и внутри этой директивы есть валидатор для сравнения значений рекордов и низших баллов и добавления ошибки к форме или возврата null (чтосчитается действительным в формах).Таким образом, валидатор будет выглядеть так:
import { Directive } from "@angular/core";
import {
AbstractControl,
NG_VALIDATORS,
Validator,
ValidationErrors
} from "@angular/forms";
@Directive({
selector: "[scoreValidation]",
providers: [
{
provide: NG_VALIDATORS,
useExisting: ScoreValidatorDirective,
multi: true
}
]
})
export class ScoreValidatorDirective implements Validator {
constructor() {}
// here control is the formgroup
validate(control: AbstractControl): ValidationErrors | null {
if (control && control.get("highScore") && control.get("lowScore")) {
// the form controls and their value
const highscore = control.get("highScore").value;
const lowscore = control.get("lowScore").value;
// not valid, return an error
if (lowscore > highscore) {
return { scoreError: true };
}
// valid
return null;
}
// form controls do not exist yet, return null
return null;
}
}
Добавьте директиву к массиву объявлений в вашем приложении и используйте ее, просто прикрепив эту директиву к тегу формы:
<form .... scoreValidation>
и ошибка может быть показана с помощью *ngIf="issueThresholdForm.hasError('scoreError')
STACKBLITZ