title: Getting pre-populated data from reactive form in angular
body: <p>I was trying to get the data from a reactive form, the data here is pre-populated in the html like this:-</p>
  
  <pre><code>        &lt;form [formGroup]="editForm"  (ngSubmit)="saveHandler()"&gt;
            &lt;div *ngFor = "let dataItem of dataItems"&gt;
              &lt;input type="text" value="{{dataItem.id}}" formControlName="id" placeholder="id"&gt;
              &lt;strong&gt;Name: &lt;/strong&gt;
               &lt;input type="text" value="{{dataItem.employee_name}}" formControlName="employee_name" placeholder="name"&gt;
              &lt;strong&gt;Salary :&lt;/strong&gt;
              &lt;input type="text" value="{{dataItem.employee_salary}}" formControlName="employee_salary" placeholder="salary"&gt;
              &lt;strong&gt;Age :&lt;/strong&gt;
              &lt;input type="text" value="{{dataItem.employee_age}}" formControlName="employee_age" placeholder="age"&gt;
              &lt;button type="submit"&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>In this code snippet the <strong>dataItem</strong> is an JSON array from the components with the following fields, now I wanted to pass the data of this  form back to the component, I cannot use the value directly from the component that is out of my scenario.
  Here is the dataItem:</p>
  
  <pre><code>this.dataItems   = [{
        "id":"1",
        "employee_name":"bappi gillu",
        "employee_salary":"2147483647",
        "employee_age":"9876443"
        }];
  </code></pre>
  
  <p>For the reactive form this is the code in the component file:</p>
  
  <pre><code>this.editForm = new FormGroup({
        id : new FormControl(null),
        employee_name : new FormControl(null), 
        employee_salary : new FormControl(null),
        employee_age : new FormControl(null),
      });
  </code></pre>
  
  <p>and here is the ngSubmit's <strong>saveHandler()</strong> :</p>
  
  <pre><code>public saveHandler(  ){
    const employee = this.editForm.value  ;
    console.log(employee );
  }
  </code></pre>
  
  <p>I am getting null If the form has the css class <strong>ng-untouched</strong> although if the css class is <strong>ng-touched</strong> the value is coming perfectly.
  Now <strong>what I wanted</strong> is to submit the data irrespective of the class. 
  Here also is a link for the <a href="https://stackblitz.com/edit/angular-b83hke?embed=1&amp;file=src/app/app.component.html&amp;view=preview" rel="nofollow noreferrer">stackblitz</a></p>
  
  <p><strong>Note</strong>: The value for the dataItem is coming from an api for this question I had put it this way.</p>