title: How to bind model to formbuilder using reactive forms in angular8
body: <p>i have used reactive forms in my application and binding to html using formcontrolName. But now instead of declaring the properties inside the formbuilder, i need to call a model and assign that model to the formbuilder and use it in html.
  I been through many links but didnt find anywhere how to work based on my requirement.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="tab-pane fade h-100 active show" id="tab-user_1" role="tabpanel" aria-labelledby="user_1"
      *ngIf="userInfoForm" [formGroup]="userInfoForm"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-6"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for=""&gt;Agent Code &lt;span class="text-danger"&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" formControlName="agentCode" class="form-control"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code> this.userInfoForm = this.FB.group({
          Id: 0,
          agentCode: this.agentCode,
          userName: [''],
          firstName: [''],
          middleName: '',
          lastName: [''],
          department: [''],
        });
        this.userInfoForm.controls['agentCode'].disable();
  </code></pre>
  
  <p>model.ts:</p>
  
  <pre><code>export class UserFormDetails {
     Id: number;
     agentCode: number;
     userName: string;
     firstName: string;
     middleName: string;
     lastName: string;
     department: string;
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/github-ck3u8u-esempy?file=src/app/user-table/user-table.component.ts" rel="nofollow noreferrer">DEMO</a></p>