Валидатор поля условного соответствия в реактивной форме

Я хочу внедрить валидатор поля условного соответствия в мой код реактивной формы, но не знаю, как это сделать.

У меня есть условный код, который скрывает эти поля пароля, если LoginType не является паролем UserName.

public userForm: FormGroup;

ngOnInit() { 
    this.createFormControls();
    this.createForm();
    this.userForm.get('loginType').valueChanges.subscribe(

    (loginType: string) => {
        this.userForm.get('password').setValidators([]);
        this.userForm.get('confirmPassword').setValidators([]);


        if (loginType== 'UsernamePassword') {   this.userForm.get('password').setValidators([Validators.required, Validators.minLength(8), Validators.pattern(/^.*(?=.{8,30})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\d])(?=.*[\W]).*$/)]);
                this.userForm.get('confirmPassword').setValidators([Validators.required, Validators.minLength(8), Validators.pattern(/^.*(?=.{8,30})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\d])(?=.*[\W]).*$/)]);
        }

        this.userForm.get('password').updateValueAndValidity();
        this.userForm.get('confirmPassword').updateValueAndValidity();

    }

    )
}

Вышеуказанные работы

Я хочу реализовать MatchValidator и обнаружил, что во всех примерах используется метод, аналогичный это

 this.form = fb.group({
     password: ['', Validators.required],
     confirmPassword: ['', Validators.required]
    }, {
      validator: PasswordValidation.MatchPassword // your validation method
    })

Однако я понятия не имею, что в моем конкретном коде можно сказать условно, поскольку я ссылаюсь либо на форму с помощью this.userForm, либо на элемент управления с помощью this.userForm.get('controlName')

Как добавить MatchFieldValidator в мой код, когда я использую условную логику с valueChanges.subscribe и updateValueAndValidity?


angular angular-reactive-forms angular5
person dfmetro    schedule 17.01.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что бы я сделал, так это вместо того, чтобы иметь проблемы с условной установкой валидаторов, вместо этого условно применить группу форм, где валидаторы уже установлены, вы просто удаляете/добавляете группы форм на основе условия.

Вот пример:

constructor(private fb: FormBuilder) {
  // build nested formgroups that you will conditionally apply / remove
  this.group1 = this.fb.group({
    password: ['', [....]],
    confirm_password: ['', [....]]
  }, { validator: PasswordValidation.MatchPassword })

  this.group2 = this.fb.group({
    some_other: ['', [...]],
  })
  // your parent form, with group1 set initially
  this.myForm = this.fb.group({
    toggler: [false], // this one toggles groups
    group1: this.group1
  })
}

Затем вы просто слушаете valueChanges toggler (в вашем случае loginType) и удаляете/добавляете formGroup. Здесь toggler - флажок, так что...

this.myForm.controls.toggler.valueChanges
  .subscribe(bool => {
    if (bool) {
      this.myForm.removeControl('group1');
      this.myForm.setControl('group2', this.group2)
    } else {
      this.myForm.removeControl('group2');
      this.myForm.setControl('group1', this.group1)
    }
    this.myForm.updateValueAndValidity();
  });

Теперь вместо этого вы применяете группы условно.

Вот

StackBlitz

person AJT82    schedule 17.01.2018