1

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.

Cegone
  • 489
  • 1
  • 9
  • 23
  • 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 May 29 '20 at 14:25
  • 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 May 29 '20 at 14:33
  • 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 May 29 '20 at 14:40
  • Ok, However, we cannot pass FormArray from service, isn't it? – Cegone May 29 '20 at 14:42
  • There may be a way to do it, but IMO this wouldn’t be the wisest approach – Andrei Gătej May 29 '20 at 14:45

1 Answers1

1

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.

Gauri Kesava Kumar
  • 466
  • 2
  • 15
  • Thanks for the response, In My application, I have already tried to initialize the controls in constructor, but it 's loaded with initial empty controls, once data came from server, then patch values not reflected, and I don't how to pass new reference of those variables, That is why I reached here. Thanks – Cegone May 29 '20 at 12:33
  • When you have the new value, try doing either this.layerFormGroup = [...this.layerFormGroup] or this.layerFormGroup = JSON.parse(JSON.stringify(this.layerFormGroup)) – Gauri Kesava Kumar May 29 '20 at 12:36
  • Here, Mostly we focus on FormArray, not FormGroup, and I tried most of the scenarios, as you suggested the above one also, When I tried with FormArray, it throws error as, FormArray is not Array Type. – Cegone May 29 '20 at 12:39
  • Did you try the JSON parsing, stringify method? Let me check for other possible methods. – Gauri Kesava Kumar May 29 '20 at 12:53