title: how to get values on change event in dynamic angular forms?
body: <p>On component.ts file I am fetching the form field values in json array like this and converting it to an FormGroup control like this.  This is working perfectly fine. </p>
  
  <pre><code>    getJsonForm(){
        let base_url = 'example.org'
        let getform_query = '/Base/formfieldsgenerator_get';
        let getform_endpoint = base_url.concat(getform_query);
  
       this.AllFormData = [];
  
          this.http.get('getform_endpoint'.'?tabpgrpid='+this.tabpgrpid+'&amp;tabgrpname='+this.tabgrpname+'&amp;usertabgrpname='+this.usertabgrpname+'&amp;moduleid='+this.moduleid+'&amp;templateid='+this.templateid+'&amp;all_mod_data='+this.all_mod_data,{headers: this.headers}).subscribe(
          res =&gt; { 
           this.AllFormData = res;
  
                  // this array is used to iterate in html side
                 this.newfdata[element] = [];
                 this.newfdata[element]['properties'] = [];
  
  
     Object.keys(res['com'][element]['schema']['properties']).forEach(inputKey =&gt; {
                        this.newfdata[element]['properties'].push(res['com'][element]['schema']['properties'][inputKey]);
  
                  });
  
              // this is used to create form controls and form groups
  
                  this.objectProps = Object.keys(res['com'][element]['schema']['properties']).map(prop =&gt; { 
  
            return Object.assign({}, { key: prop} , res['com'][element]['schema']['properties'][prop]);
            });
  
     for(let prop of Object.keys(res['com'][element]['schema']['properties'])) {
  
            formGroup[prop] = new FormControl(res['com'][element]['schema']['properties'][prop].value || '', this.mapValidators(res['com'][element]['schema']['properties'][prop].validation));
  
                  }
          });
  
        this.form = new FormGroup(formGroup);
            }); 
  }
  </code></pre>
  
  <p>Now on components.html side I am using the array like this to generate the dynamic form. This is also working fine. </p>
  
  <pre><code>&lt;form (ngSubmit)="custom_submit(form.value)" [formGroup]="form" &gt;
           &lt;div *ngFor="let input1 of newfdata[tabname].properties"&gt;   
                  &lt;ng-container *ngIf="input1.type=='string'"&gt;
                                  &lt;div&gt;
                                       &lt;mat-form-field&gt;
                                       &lt;input matInput  [formControlName]="input1.field_name" [id]="input1.field_name" type="text"  placeholder="{{input1.title}}"&gt;
                                       &lt;/mat-form-field&gt;   
                                  &lt;/div&gt;
                              &lt;/ng-container&gt;
           &lt;/div&gt;  
  &lt;/form&gt;
  </code></pre>
  
  <p>Now I want to change the value of one form field based on changes on previous form fields. For that I am not able to subscribe to the valuechanges emitter of the form group variable. </p>
  
  <p>I have tried this on ngOnit but it's not working and not producing any result in console. </p>
  
  <pre><code>ngOnit(){
  
     this.form.valueChanges.subscribe(val =&gt; {
                      this.formattedMessage = 'My changed values for is ${val}.';
                      console.log(this.formattedMessage);
                    });
  
  
  
  }
  </code></pre>
  
  <p>Edit 1 :</p>
  
  <p>After suggestion from Manzur Khan, I have passed the valueas true for the success of formcreated event and then in ngOnit used the value like this to get the onchange event : </p>
  
  <pre><code>      this.form = new FormGroup(formGroup);
        this.dataService.change_current_form_created("true");
  </code></pre>
  
  <p>and in NgonIt </p>
  
  <pre><code>this.dataService.last_form_craeted_message.subscribe(data =&gt; {
    if(data=="true") {
      this.form.valueChanges.subscribe(val =&gt; {
           this.formattedMessage = 'My changed values for is ${val}.';
              console.log(this.formattedMessage);
          });
  }
  });
  </code></pre>
  
  <p>Now I am able to log on change event in console but not able to get the resolution for ${val}.</p>
  
  <p>Edit 2 : </p>
  
  <p>Since the val is object, I was not able to resolve ${val} somehow,I Simply did </p>
  
  <pre><code>   this.form.valueChanges.subscribe(val =&gt; {
              console.log('the changed value is',val);
          });
  </code></pre>
  
  <p>It gives me all the values of given formgroups. I still need to optimize this result further so that I just listened to specific form controls. But it has give me a road to go. Thanks all. </p>