title: Populating/patching values of angular reactive forms
body: <p>I'm curently working on crud application using angular 4, I'm wondering, how can I populate my reactive form with the data that's been parsed in the same row with the button that opens up the form, form is inside ngx-bootstrap modal and it should be the same one I have on the other button for adding new item/object?</p>
  
  <p>Here's the code, I hope I can present my problem to you properly...</p>
  
  <p>I should noted that I have a working form for adding new employee, and want to use same one but want to populate the form with the values of the object I click on/row where the edit button is... (sorry for the lack of better explanation)
  So I have a class of my object </p>
  
  <pre><code>        export class employee {
          UserId: string;
          FirstName: string;
          LastName: string;
          Email: string;
          }
  </code></pre>
  
  <p>In my app.component.ts I have </p>
  
  <pre><code>     ngOnInit() {
      // populates table with current users in database onInit
      this.LoadAllEmployees();
  
  
      this.form = this.formBuilder.group({
          FirstName: [null, [Validators.required, Validators.minLength(2)]],
          LastName: [null, Validators.required],
          Email: [null, [Validators.required, Validators.email]],
  
      });
  
         }
  
      onSubmit() {
      if (this.form.valid) {
          console.log("Form Submitted!", this.form.value);
          this.form.reset();
          this.modalRef.hide();
  
      }
      else {
          this.validateAllFormFields(this.form)
      }
       }
  
      Save(myForm: NgForm) {
      this.GetDemoObject(myForm);
      this.AddEmployee(this.Demoemployee);
      }
  
      GetDemoObject(myForm: NgForm): employee {
      this.Demoemployee = new employee;
      this.Demoemployee.FirstName = myForm.value.FirstName;
      this.Demoemployee.LastName = myForm.value.LastName;
      this.Demoemployee.Email = myForm.value.Email;
              return this.Demoemployee;
       }
  </code></pre>
  
  <p>In my app.component.html there's a table and ngx-bootstrap call</p>
  
  <pre><code>      &lt;table style="width:100%" class="table table-striped" 
       id="billing_history_table"&gt;
       &lt;thead class="head"&gt;
          &lt;tr&gt;
              &lt;th&gt;Employee Name&lt;/th&gt;
              &lt;th&gt;Mail&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
  
          &lt;/tr&gt;
          &lt;/thead&gt;
         &lt;tbody&gt;
          &lt;tr *ngFor="let e of employeelist; let i = index "&gt;
              &lt;td&gt;{{e.firstName + '&amp;nbsp;' +e.lastName}}&lt;/td&gt;
              &lt;td&gt;{{e.positionId}}&lt;/td&gt;
              &lt;td&gt;{{e.email}}&lt;/td&gt;
             &lt;td&gt;&lt;a (click)="openModal(template)"&gt;&lt;span class="glyphicon 
               glyphicon-edit"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
             &lt;/tr&gt;
             &lt;/tbody&gt;
             &lt;/table&gt;
         &lt;/div&gt;
  
        &lt;ng-template #template&gt;
  
         &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-
       label="Close" (click)="modalRef.hide()"&gt;&lt;span aria-hidden="true"&gt;&amp;times;
      &lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Add new user&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;form class="form-horizontal" [formGroup]="form" #myForm="ngForm" 
     (ngSubmit)="onSubmit(myForm.value)"&gt;
  
  
              &lt;div class="form-group" [ngClass]="displayFieldCss('FirstName')"&gt;
                  &lt;label for="FirstName" class="control-label required"&gt;First 
        name&lt;/label&gt;
                  &lt;input type="text" id="FirstName" class="form-control" 
         formControlName="FirstName"&gt;
  
                  &lt;app-field-error-display 
        [displayError]="isFieldValid('FirstName')"
                                           errorMsg="First name is not valid!"&gt;
                  &lt;/app-field-error-display&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" [ngClass]="displayFieldCss('LastName')"&gt;
                  &lt;label for="LastName" class="control-label required"&gt;Last 
          name&lt;/label&gt;
                  &lt;input type="text" id="LastName" class="form-control" 
         formControlName="LastName"&gt;
                  &lt;app-field-error-display 
          [displayError]="isFieldValid('LastName')"
                                           errorMsg="Last name is not valid!"&gt;
                  &lt;/app-field-error-display&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" [ngClass]="displayFieldCss('Email')"&gt;
                  &lt;label for="Email" class="control-label 
          required"&gt;Email&lt;/label&gt;
                  &lt;input type="text" id="Email" class="form-control" 
         formControlName="Email"&gt;
                  &lt;app-field-error-display 
          [displayError]="isFieldValid('Email')"
                                           errorMsg="Email is not valid!"&gt;
                  &lt;/app-field-error-display&gt;
              &lt;/div&gt;
  
  
  
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-
           dismiss="modal" (click)="modalRef.hide()"&gt;Close&lt;/button&gt;
                  &lt;button type="submit"
                          class="btn btn-primary" (click)="Save(myForm)"&gt;
                      Submit
                  &lt;/button&gt;
  
              &lt;/div&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
  
         &lt;/div&gt;
       &lt;/ng-template&gt;
  </code></pre>
  
  <p><strong>Can anyone give me some directions, some example of similar thing or any advice, please...</strong></p>