conditionalExpression in RxWebvalidators.required not checked

[hoermillerj]

Describe the bug

When creating two formControls where one uses the Required RxWebvalidator with a conditionalExpression, that expression is only checked when the formControl value itself is changed. This leads to an issue when the condition checks the state of another formControl. I created an example based on the code in the documentation Link to documentation.

Expected Behavior

When any formControl in the formGroup changed, the conditionalExpression should check whether or not the validator should be applied or not and by doing so possibly change the valid state of the formGroup.

To Reproduce

Check the provided Stackblitz. There you can see that the form valid state does not change to invalid even though the formControl "middleName" for example should be required when entering the value "Bharat" into the "firstName" formControl input. Only after changing the "middleName" formControl value, is the conditionalExpression applied.

Url (stackblitz or plunker or other)

https://stackblitz.com/edit/angular-ivy-vpfsd5?file=src/app/app.component.ts

Package Version

@rxweb/reactive-form-validators@2.1.7

[simfyz]

@ajayojha is there any updates on this issue? I'm having the same issue.
@hoermillerj did you find a workaround on this?

[ajayojha]

I did check in the past but forgot to update here, Please refer to this link, I think it's working as expected

[simfyz]

I did check in the past but forgot to update here, Please refer to this link, I think it's working as expected

@ajayojha I think this has a conflict of API or issue with IVY. In youe example, it is version ANgular v 7. Please refer the example StackBlitz by @hoermillerj , it's Angular 7 and has the issue. I'm also on v13.

[hoermillerj]

@ajayojha I checked your gist and it seems like you are using an older version of Angular as @simfyz pointed out. I created a new version of my StackBlitz link here to incorporate your style (here), but unfortunately the results are the same. The required validator only takes effect after the value of "middleName" or "lastName" has been changed and then removed again.

[ajayojha]

@hoermillerj & @simfyz thanks for pointing it out. I will look into this and fix it soon.

[hoermillerj]

@simfyz to answer your question. I simply added a subscription to the value change for the formControl (in this example "firstName") and then added a required validator to the formControls that should be required conditionally.

[simfyz]

@simfyz to answer your question. I simply added a subscription to the value change for the formControl (in this example "firstName") and then added a required validator to the formControls that should be required conditionally.

Thanks. I did write my own custom validator to achieve this. Not the cleanest way. I will wait till a fix from @ajayojha

[ajayojha]

@hoermillerj I have checked the shared stackblitz link and identified the cause of this issue. It's not related to lib, You have missed importing the RxReactiveFormsModule in the root module. that's the reason conditional validation is not working. Please refer to this updated code example.

Here is the changed code snippet:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    RxReactiveFormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

@simfyz Please check in your project whether the RxReactiveFormsModule is imported or not.

I am not closing this ticket until getting the green signal from you guys (@hoermillerj & @simfyz ) :).

[simfyz]

@ajayojha Thanks for the headsup. I found that it's not imported in the root module, rather to shared module and imported along the feature modules. I think after the changes as you mentioned, it is working as I found, now it is passed to the QAs to be verified. I will update if I find any issues here on.
I'm interested to see what @hoermillerj 's findings.

[simfyz]

@ajayojha Looks like the issue is still persisting. I have check box inside the form array. if the check box value is true, another value is required. The conditonalExpression is firing only at the initalization. After that it fires when the checkbox is checked. When unchecked it's not firing the conditional expression. I did import in the root module.

[ajayojha]

@simfyz Please share the stackblitz URL of the issue example.