Можно ли создать пользовательскую функцию проверки формы управления, которая имеет зависимости для реактивных форм

Question

У меня есть Реактивная форма с полями «Пароль» и «Подтверждение пароля». Я хочу создать пользовательскую функцию проверки для поля «Подтверждение пароля». Следует убедиться, что значение «проверки пароля» совпадает с «паролем». Можно ли создать такую ​​функцию проверки и использовать ее при создании элемента управления формы?

‘formcontrol: [null, myValidationFunction]’

Насколько я знаю, функция проверки принимает FormControl и возвращает объект. Нет другого способа передать ему другой аргумент.

Я прочитал, что могу создать «Директиву», но примеры используют ее для форм, управляемых «Шаблонами».

Answer 1

Один из способов добиться этого - поместить пароль и verifyPassword в FormGroup . Затем эта форма FormGroup может быть передана в пользовательскую функцию проверки, которая принимает тип AbstractControl в качестве объекта, из которого выходит FormGroup. Таким образом, вы могли бы пойти что-то вроде этого:

template.html

<form [formGroup]="main">
  <!-- Other FormControls -->
  <div formGroupName="passwordGroup">
    <!-- input element for password FormControl -->
    <!-- input element for verifyPassword FormControl -->
  </div>
</form>

component.ts

function passwordValidator(c: AbstractControl) : {[key: string] : boolean} | null {
          let password = c.get('password'); 
          let verifyPassword = c.get('verifyPassword'); 
          if(password.value === verifyPassword.value)
            return null;
          else
            return {'match' : true};    
        }

ngOnInit() {
        this.main = this.fb.group({
            otherFormControls : [''],
            passwordGroup: this.fb.group({
            password: ['',[Validators.required],
            verifyPassword: ['',Validators.required]
            },{validator : passwordValidator})
});}