MrWolfZ / ngrx-forms

Enhance your forms in Angular applications with the power of ngrx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Conditional Validation and Dependent Controls

lukhomdingi opened this issue · comments

Hi,

I am using version 6.3.5, Angular 12.0.4, and I have a library with classes that I'm not allowed to update in anyway. Here is an example:

class Person() {
    name: string = null;
    maidenName = null;
    surname: string = null;
}
class TraditionalMarriage {
    wife: Person = new Person();
    husband: Person = new Person();
    assumeHusbandSurname: boolean;
}

// This I can change
interface MyState {
    marriageForm: FormGroupState<TraditionalMarriage>;
    user: User;
}

This is my initial state:

const formId = 'MarriageForm'
export const initialState: MyState = {
    marriageForm: createFormGroupState<TraditionalMarriage>(formId, new TraditionalMarriage());
    user: new User();
}

I cannot change the order of the properties in the two classes and I need the wife's surname to be the same as the husband's if assumeHusbandSurname is true and maidenName for the wife to then be required. This is how I have it currently:

updateGroup<TraditionalMarriage>({
    wife: (wifeControl, {value: marriageDetails} => {
        return updateGroup<Person>(wifeControl, {
           name: required,
           surname: control => {
               if (marriageDetails.assumeHusbandSurname) {
                   const { husband } = marriageDetails;
                   return setValue(disable(control), husband.surname);
               }
              control = validate(control, required);
              return enable(control);
           },
           maidenName: control => {
               if (marriageDetails.assumeHusbandSurname) {
                   return validate(control, required);
               }
              return validate(control, () => ({}));
           }
        });
    },
    husband: updateGroup<Person>({
       name: required,
       surname: required
    })
});

Expected behavior
If husband's name is John Watson, when assumeHusbandSurname changes to true, wife's surname should be disabled and set to Watson and if the husband's surname changes, the wife's surname should change as well..

Actual behavior
When the assumeHusbandSurname changes to true for the first time, nothing happens to the wife's control. It's only when something else changes that it gets updated. If the assumeHusbandSurname changes back to false, only now will the wife's control be updated with assumeHusbandSurname still true in the callback function.

Also when the husband's surname changes from Watson to Holmes, the wife's surname gets set as Watson. When something else changes, only then will the wife's surname be affected.

Library version:
6.3.5

Perhaps it's my implementation that is wrong, do please assist.

Thank you.

Apologies for the late response. This all depends on how exactly you call your validation function. It must be called after the form state was updated, but from your description it seems it is called before that. Can you share the full reducer in which this form state is handled?

Btw, given that the issue is rather old and that you have probably already solved the issue, I'll close it for now. Feel free to comment here again and I'll re-open it while we are looking for a solution.