[Bug(?)] Separate signals for formValue and formValueChange breaks validationConfig

[ross1296]

Description:
Separate signals for formValue and formValueChange breaks conditional validation / updateValueAndValidity

Observed behaviour:
updateValueAndValidity does not trigger

Expected behaviour:
updateValueAndValidity should trigger

Stackblitz:
GH: https://github.com/ross1296/ngx-vest-forms-stackblitz/tree/separate-form-value-and-form-value-change-to-break-validation-config

[simplifiedcourses]

Could you ellaborate with steps to reproduce? The stackblitz seems to work

[ross1296]

Could you ellaborate with steps to reproduce? The stackblitz seems to work

I'm currently on vacation, but conditional validation no longer works. An example would be the emergency contact being required if the age is less than 18. Toggle the age between 17/18 and it doesn't update value and validity.

Also, another issue I forgot to mention. If you conditionally render an input component on the form such as inside of an if(isLoading) in an edit form with a skeleton when loading and the actual component when not loading, then an error is thrown in the console for vest forms.

I can elaborate further once I return from vacation.

Thanks for the reply!

[ross1296]

@simplifiedcourses

I'm back now. Here's the latest:

There is definitely an issue with the conditional validation on the Stackblitz here: https://stackblitz.com/github/ross1296/ngx-vest-forms-stackblitz/tree/separate-form-value-and-form-value-change-to-break-validation-config?file=README.md

Steps to reproduce:

1. Open the link and let everything render etc etc
2. Immediately submit the form, we note that all the validation messages are working
3. Toggle the age from 17 to 18

Toggling the age from 17 to 18 and back again should conditionally render and hide the required message for the emergency contact, but in this Stackblitz it is not. That is because of the changes made inside of purchase-form.component.html:

<form
  class="mt-8"
  scVestForm
  (ngSubmit)="onSubmit()"
  [formValue]="formValue()"
  [validateRootForm]="true"
  [formShape]="shape"
  [suite]="suite"
  [validationConfig]="validationConfig"
  (validChange)="formValid.set($event)"
  (errorsChange)="errors.set($event)"
  (formValueChange)="updatedFormValue.set($event)"
>

Note that in this example the [formValue] and (formValueChange) are not using the same property, which should be a valid thing to do that should not break validation?

I'll open a separate issue for the other thing I mentioned in my comment above.