Ngx-formly: How to subscribe on value changes of hidden field?

[ugogiordano87]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[X] support request

Let's say I have two hidden fields as following:

          {
            className: 'col-md-4',
            key: 'selectTwo',
            type: 'select',
            templateOptions: {
              label: 'Select Two',
              placeholder: 'Select Two',
              required: true,
              options: [],
            },
            hideExpression: 'model.selectOne !== "1"',
            lifecycle: {
              onInit: (form, field) => {
                field.formControl.setValue('');
                field.templateOptions.options = this.selectService.getSelectTwoOptions();
              },
            },
          },
          {
            className: 'col-md-4',
            key: 'selectThree',
            type: 'select',
            templateOptions: {
              label: 'System Concentrator Port',
              placeholder: 'System Concentrator Port',
              required: true,
              options: [],
            },
            hideExpression: 'model.selectOne !== "1"',
            lifecycle: {
              onInit: (form, field, model) => {
                field.formControl.setValue('');
                // Here the "selectTwo" formControl does not exist yet, 
                // so I cannot subscribe to its value changes, that is I cannot do:
                form.get('selectTwo').valueChanges.pipe(
                   takeUntil(this.onDestroy$),
                   startWith(form.get('selectTwo').value),
                   tap(selectTwoId => {
                     field.formControl.setValue('');
                     field.templateOptions.options = this.selectService.getSelectThreeOptions(Number(selectTwoId));
                   }),
                ).subscribe();
              },
            },

having the same hideExpression related to the value of another non hidden field (selectOne).
Now, as you can see from the previous pice of code, I would like to subscribe to valueChanges on the selectTwo hidden field, inside the selectThree hidden field.
As expected, it's not going to work inside the onInit lifecycle hook, since at that time none of the hidden fields exist yet.

I think I can subscribe inside another lifecycle hook, e.g., doCheck or afterViewChecked, but I don't know if that is the right way to go since I want to subscribe only once while those hooks are fired several times.

Another options I was thinking is to subscribe directly to the form value changes, i.e., form.valueChanges.subscribe().

Any suggestion on this?

[ugogiordano87]

I found the following solution:

  lifecycle: {
    onInit: (form, field) => {
      form.valueChanges.pipe(
        takeUntil(this.onDestroy$),
        filter(fields => ( fields.selectTwo 
                           && ( fields.selectTwo !== '' ) 
                           && ( form.get('selectTwo').dirty ))),
        tap(fields => {
          // This is required to avoid the "Maximum call stack size exceeded" ERROR
          form.get('selectTwo').markAsPristine(); 

          field.formControl.setValue('');
          field.templateOptions.options = this. selectService.getSelectThreeOptions(Number(fields.selectTwo));
        }),
      ).subscribe();
    },
  },

So, please close this.

[aitboudad]

or subscribe to field.formControl

[ugogiordano87]

@aitboudad can you show me an example of subscribing to formControl ?

[aitboudad]

@ugogiordano87 try with:

const selectTwoField = field.parent.fieldGroup.find(f => f.key === 'selectTwo');
selectTwoField.formControl.valueChanges.
....