Пользовательская проверка в Angular4
Я новичок в Angular, на моей странице у меня есть простая группа форм. в котором я должен написать пользовательскую проверку для имени.
this.searchForm = this._formBuilder.group({
profileName: new FormControl('', Validators.compose([Validators.required])),
TypeId: new FormControl('', Validators.compose([Validators.required])),
tempRange: new FormControl('', Validators.compose([Validators.required])),
region: new FormControl('', Validators.compose([Validators.required])),
quarter1: new FormControl('', Validators.compose([Validators.required])),
quarter2: new FormControl('', Validators.compose([Validators.required]))
}, {
validator: this.customValidator// your validation method
});
Я поставил пользовательскую проверку в методе this.customValidator.
Одна из моих проверок заключается в проверке дубликатов проверки для profileName.
У меня возникла проблема при получении другого метода (где находится логика проверки) в классе сценария того же типа из метода проверки, когда я вызываю этот метод (который не является статическим или функцией), я получаю ошибку, как (при нажатии f12)
Ошибка: Uncaught (в обещании): Ошибка типа: this.validateProfileName не является функцией... '.
Есть ли способ вызвать конкретный метод, или мне нужно реализовать всю логику в сторону метода валидации сам.
Также, как я могу показать оттуда сообщение об ошибке проверки в том же стиле, что и сообщение об ошибке проверки обязательного поля.
Мой метод проверки
customValidator(control: AbstractControl) {
debugger;
let profileName = control.get('profileName').value;
let retgionCode = control.get('regionCode').value;
let forcastType = control.get('forecastTypeId');
var status = this.validateProfileName(retgionCode, profileName);
if (!status)
control.get("profileName").setErrors({ 'invalidProfileName': true });
return null;
}
Заранее спасибо.
2 ответа
Проблема с this
, Поскольку у вас есть это сейчас, вы теряете сферу this
, Внутри вашего собственного валидатора, this
указывает не на область действия вашего компонента, а на область действия функции. И нет validateProfileName
в рамках функции, так что Angular дает вам правильную ошибку.
Чтобы сохранить контекст this
, свяжите это:
validator: this.customValidator.bind(this)
Теперь у вас есть доступ к области действия за пределами пользовательского валидатора.
Похоже, вы выполняете больше работы, чем нужно, и в любом случае вы не вызываете функцию в своем пользовательском валидаторе. Это то, что вы хотите:
this.searchForm = this._formBuilder.group({
profileName: ['', Validators.required],
TypeId: ['', Validators.required],
tempRange: ['', Validators.required],
region: ['', Validators.required],
quarter1: ['', Validators.required],
quarter2: ['', Validators.required]
}, { validator: this.customValidator() });
Затем в вашей функции проверки вам нужно сделать это:
customValidator() {
debugger;
let profileName = this.searchForm.get('profileName').value;
let retgionCode = this.searchForm.get('regionCode').value;
let forcastType = this.searchForm.get('forecastTypeId');
let status = this.validateProfileName(retgionCode, profileName);
if (!status) {
this.searchForm.get("profileName").setErrors({ 'invalidProfileName': true });
return null;
}
}