Angular reactive forms - RxwebValidators conditionalExpression not working properly

2
votes

I'm trying to implement conditional required validator using RxwebValidators package. The problem occurs when FormGroup is nested and those nested FormGroups are passed as @Inputs into child components. Conditional validation works but only after I make a FormControl dirty, meaning i text something in input and then remove it. Only then, desired FormControl becomes required and invalid which is not the behaviour I'm expecting. It should become required immediately after user inputs "John" in the firstName control. Am I missing something I should do in addition or doing something wrong? Or is it just how it works?

Here's a stackblitz with the problem. https://stackblitz.com/edit/rxweb-conditional-required-validator-angular-reactive-fo-xjvfx6

Thanks for help!

1
angularangular-reactive-formsangular-formsangular-validation
I have the same issue with my project. I looked at your code and everything appears to be in the right order. Any luck since publishing this question? - Brian Hanna

1 Answers

0
votes

This appears to be a configuration issue as I created a fresh angular project and it works correctly (i.e. it updates the value and validity of lname on firstName changes).

return this.fb.group({
  firstName: [null, [RxwebValidators.required()]],
  lastName: this.fb.group({
    lname: [null, [
      RxwebValidators.required({
        conditionalExpression: (x, y) => {
          console.log('change', x);
          return y.firstName === 'Brian';
        }
      })]]
  })
});