Почему не работает пользовательский валидатор Angular 4 FormGroup?

Question

Попытка добавить пользовательский валидатор formValidator() в группу форм. В зависимости от некоторых условий я устанавливаю ошибки {invalidData: true}. Но когда условие ложно, установка ошибок на ноль. Для самого control2 необходим валидатор. Если я установлю ошибки в null, он также очистит требуемый валидатор.

См. Приведенный ниже код,

createReactiveForm(data: any) {
    const formGroup = new FormGroup({
        'control1': new FormControl(data.value1),
        'control2': new FormControl(data.value2, [Validators.required])
    }, this.formValidator());
}

formValidator(): ValidatorFn {
    return (group: FormGroup): ValidationErrors => {
        const control1 = group.controls['control1'];
        const control2 = group.controls['control2'];
        if (control1.value === 'ABC' && control2.value !== 'ABC') {
            control2.setErrors({ invalidData: true });
        } else {
            control2.setErrors(null);
        }
        return;
    };
}

Какое решение для этого? Или я что-то не так делаю в пользовательском валидаторе? Пожалуйста помоги.

Answer 1

Функции проверки не должны устанавливать ошибки на элементах управления.Они должны возвращать объекты ошибок валидации.

formValidator(): ValidatorFn {
    return (group: FormGroup): ValidationErrors => {
        // use the abstraction provided by the framework
        const control1 = group.get('control1');
        const control2 = group.get('control2');
        // return the correct value depending on your condition
        return control1.value === 'ABC' && control2.value !== 'ABC' ? 
          { invalidData: true } : null;
    };
}