Angular Reactive Form - FormArray ChangeDection onPush not working

Question

We are using ChangeDetectionStrategy Onpush in all the components, so we are following dump/smart component approach, so we are keeping all the logical part in service/facade side.

Right now we need to generate dynamic controls using Reactive Forms, FormGroup, FormArray,

So we are preparing FormGroup and FormArray in service side, and passing these to dump component as Input parameter, in this case I couldn't pass these as behaviour subject as observable, I'm directly passing as Input parameter.

If anything changes in FormArray, it doesn't not reflect in dump component due to the OnPush changeDectionStrategy.

I have mocked the implementation in this stackblitz

In this sample, I have prepared FormArray, FormGroup in service file, and passing to dump component via smart component.

I couldn't find proper samples on Behavioursubject and Abstract control,

If it is possible to pass FormArray, FormGroup as Observable, Kindly help me to know.

I wouldn't pass form controls through @Input params. I'd create the root FormGroup in the smart component and the child controls in the dumb components. — Andrei Gătej
If we are keeping FornGroup and FormArray in Dump components, It will work, but, I'm asking is there any possible way to pass as Input Parameter, If we split the FormGrou and FormArray, we might loss reusable dump component, Am i correct? — Cegone
I’m not sure you can lose something in this way. With this approach, the service is no longer responsible for creating the child form controls, but the dumb components. — Andrei Gătej
Ok, However, we cannot pass FormArray from service, isn't it? — Cegone
There may be a way to do it, but IMO this wouldn’t be the wisest approach — Andrei Gătej

Gauri Kesava Kumar Gauri Kesava Kumar · Accepted Answer · 2020-05-29T12:27:26

In the stackblitz example, both the FormGroup and FormArrays are undefined even from the Layer-Container Component because the variables are taken from the service before the initial data is loaded. If you do that, and then fetch the service variables and pass it to the child component, then the values will be obtained.

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { LayerService } from '../layer.service';

@Component({
  selector: 'app-layer-container',
  templateUrl: './layer-container.component.html',
  styleUrls: ['./layer-container.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LayerContainerComponent implements OnInit {
layerFormGroup ;
layerFormArray ;

  constructor(private service : LayerService) { 
    this.service.loadInitialData();
    this.layerFormGroup = this.service.layerFormGroup;
    this.layerFormArray = this.service.layerFormArray; 
  }

  ngOnInit() {
    this.service.loadInitialData();
  }

}

And since both FormArray and FormGroup are not primitive data types, the @Input() cannot recognize the changes and we probably will not be able to detect the changes. Passing a new reference of these variables might just do the trick.

Angular Reactive Form - FormArray ChangeDection onPush not working

1 Answers