Пользовательская проверка в 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;
    }
}
Другие вопросы по тегам