title: How to get the form control value from a dynamically build from in angular
body: <p>In here I am passing some data from parent to child component to build a dynamic form.</p>
  <p>This is my parent component html</p>
  <pre><code>&lt;app-child-com  *ngIf=&quot;info.length&gt;0&quot; #FormFieldValues [info]=&quot;info&quot;
                                                  [provider] = &quot;provider&quot;&gt;&lt;/app-child-com&gt;
  </code></pre>
  <p>This is my parent component.ts file</p>
  <pre><code>@ViewChild('FormFieldValues', {static: false}) formConfigValues: ChildComComponent;
  setInfo(){
      this.service.getDetails().subscribe(res =&gt; {
       this.info = res;
      
      }, err =&gt; {
        console.log(err);
      });
    }
  </code></pre>
  <p>I am trying access the pass data from child to parent component.</p>
  <pre><code>saveDetails(){
    console.log(this.formConfigValues.Id);
  }
  </code></pre>
  <p>This is my child component.ts</p>
  <pre><code>ngOnChanges(changes: SimpleChanges): void {
      if (this.info.length &gt; 0 || this.info !== undefined) {    
        this.createForm();
      }
    }
  
  private createForm() {
      const group = {};
      this.info.forEach(field =&gt; {
       if (field.type === 'text') {
          group[field.name] = new FormControl('', Validators.required);
          if (group[field.name] === 'id') {
            if (this.configFieldForm.get('id').value != null || this.configFieldForm.get('id').value != undefined) {
              this.Id = this.configFieldForm.get('id').value;
              console.log(this.Id);       
            }
          }
          if (group[field.name] === 'key') {
            if (this.configFieldForm.get('key').value != null || this.configFieldForm.get('key').value != undefined) {
              this.Key = this.configFieldForm.get('key').value;
              console.log(this.Key);
            }
          }
        }
  
      });
      this.configFieldForm = new FormGroup(group);
    }
  </code></pre>
  <p>This is my child component html file</p>
  <pre><code>&lt;form [formGroup]=&quot;configFieldForm&quot; &gt;
    &lt;div [isOpen]=&quot;isLiveOpen&quot; [isDisabled]=&quot;isLiveDisabled&quot; class=&quot;mb-3&quot;&gt;    
      &lt;ng-container *ngFor=&quot;let field of info&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-12&quot;&gt;
            &lt;ng-template [ngIf]=&quot;field.type === 'heading'&quot;&gt;
              &lt;div class=&quot;col-sm-12&quot;&gt;
                &lt;h6&gt;{{field.label}}&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/ng-template&gt;
            &lt;ng-template [ngIf]=&quot;field.type === 'text'&quot;&gt;
              &lt;div class=&quot;form-group row&quot;&gt;
                &lt;div class=&quot;col-sm-4&quot;&gt;
                  &lt;label class=&quot;col-form-label&quot;&gt;{{field.label}}
                    &lt;ng-template [ngIf]=&quot;field.required === true&quot;&gt;
                      &lt;span class=&quot;required-asterisk&quot;&gt;*&lt;/span&gt;
                    &lt;/ng-template&gt;
                  &lt;/label&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-sm-8&quot;&gt;
                  &lt;div class=&quot;custom-file&quot;&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;{{field.label}}&quot;
                      formControlName=&quot;{{field.name}}&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/ng-template&gt;              
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-container&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>But I cannot access this value in parent conponent <code>console.log(this.formConfigValues.Id)</code> How toget the value user type in text box in child component and pass it to parent component. Currently It's coming as <code>undefined</code>.</p>