title: Angular 6 reactive form to populate table in other component
body: <p>I have a reactive form in Angular 6. I would like to get the inputted data from that form and populate a table in another component view. This is more of a how to question? My code looks like this so far: The form needs to populate the table with the inputs somehow. Please excuse that the form fields may not match the table fields yet, like I said I am looking at how this can be done from a development point of view. </p>
  
  <p><strong>Form .html</strong></p>
  
  <pre><code>&lt;!--Form--&gt;
      &lt;form class="form-horizontal" [formGroup]="serviceForm" (ngSubmit)="serviceForm.value()"&gt;
        &lt;div class="form-group mb-8"&gt;
          &lt;div class="col-3 col-sm-12"&gt;
            &lt;label class="form-label" for="u_caller_id"&gt;On behalf of this user: &lt;sub class="text-secondary"&gt;*&lt;/sub&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-4 col-sm-12"&gt;
            &lt;select formControlName="u_caller_id" class="form-select" required&gt;
              &lt;option *ngFor="let user of users" [ngValue]="user"&gt;
                {{ user.id }}
              &lt;/option&gt;
            &lt;/select&gt;
            &lt;div *ngIf="serviceForm.get('u_caller_id').errors &amp;&amp; (serviceForm.get('u_caller_id').touched || serviceForm.get('u_caller_id').dirty)"&gt;
              &lt;div *ngIf="serviceForm.get('u_caller_id').hasError('required')" class="mt-2 mb-2"&gt;
                &lt;h6 class="text-error"&gt;This field is required&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group mb-8"&gt;
          &lt;div class="col-3 col-sm-12"&gt;
            &lt;label class="form-label" for="u_destination_country"&gt;Your location: &lt;sub class="text-secondary"&gt;*&lt;/sub&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-4 col-sm-12"&gt;
            &lt;select formControlName="u_destination_country" class="form-select"&gt;
              &lt;option *ngFor="let state of countries" [ngValue]="state"&gt;
                {{ state.name }}
              &lt;/option&gt;
            &lt;/select&gt;
            &lt;div *ngIf="serviceForm.get('u_destination_country').errors &amp;&amp; (serviceForm.get('u_destination_country').touched || serviceForm.get('u_destination_country').dirty)"&gt;
              &lt;div *ngIf="serviceForm.get('u_destination_country').hasError('required')" class="mt-2 mb-2"&gt;
                &lt;h6 class="text-error"&gt;This field is required&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group mb-8"&gt;
          &lt;div class="col-3 col-sm-12"&gt;
            &lt;label class="form-label" for="u_requester_phone_number"&gt;Phone number: &lt;sub class="text-secondary"&gt;*&lt;/sub&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-4 col-sm-12"&gt;
            &lt;input class="form-input" type="text" id="u_requester_phone_number" placeholder="Enter phone number" type="number"
              formControlName="u_requester_phone_number" required&gt;
            &lt;div *ngIf="serviceForm.get('u_requester_phone_number').errors &amp;&amp; (serviceForm.get('u_requester_phone_number').touched || serviceForm.get('u_requester_phone_number').dirty)"&gt;
              &lt;div *ngIf="serviceForm.get('u_requester_phone_number').hasError('required')" class="mt-2 mb-2"&gt;
                &lt;h6 class="text-error"&gt;This field is required&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group mb-8"&gt;
          &lt;div class="col-3 col-sm-12"&gt;
            &lt;label class="form-label" for="u_serial_number"&gt;Device/Asset: &lt;sub class="text-secondary"&gt;*&lt;/sub&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-4 col-sm-12"&gt;
            &lt;select formControlName="u_serial_number" class="form-select" required&gt;
              &lt;option *ngFor="let device of devices" [ngValue]="device"&gt;
                {{ device.id }}
              &lt;/option&gt;
            &lt;/select&gt;
            &lt;div *ngIf="serviceForm.get('u_serial_number').errors &amp;&amp; (serviceForm.get('u_serial_number').touched || serviceForm.get('u_serial_number').dirty)"&gt;
              &lt;div *ngIf="serviceForm.get('u_serial_number').hasError('required')" class="mt-2 mb-2"&gt;
                &lt;h6 class="text-error"&gt;This field is required&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group mb-8"&gt;
          &lt;div class="col-3 col-sm-12"&gt;
            &lt;label class="form-label" for="subject"&gt;Subject: &lt;sub class="text-secondary"&gt;*&lt;/sub&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-4 col-sm-12"&gt;
            &lt;input class="form-input" type="text" id="subject" placeholder="Enter subject" type="text" formControlName="subject"
              required&gt;
            &lt;div *ngIf="serviceForm.get('subject').errors &amp;&amp; (serviceForm.get('subject').touched || serviceForm.get('subject').dirty)"&gt;
              &lt;div *ngIf="serviceForm.get('subject').hasError('required')" class="mt-2 mb-2"&gt;
                &lt;h6 class="text-error"&gt;This field is required&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;h6 class="text-gray mt-2"&gt;Please note maximum length is 80 characters.&lt;/h6&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="form-group mb-8"&gt;
          &lt;div class="col-3 col-sm-12"&gt;
            &lt;label class="form-label" for="describe"&gt;Please describe your issue:&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-4 col-sm-12"&gt;
            &lt;textarea class="form-input" id="describe" placeholder="Describe your issue" rows="3" formControlName="issue"&gt;&lt;/textarea&gt;
            &lt;h6 class="text-gray mt-2"&gt;The more information you can provide here, the easier time the organization will
              have in diagnosing and resolving your issue.&lt;/h6&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="columns col-12 col-sm-12"&gt;
          &lt;div class="column col-10 col-sm-6 text-right"&gt;
            &lt;button class="btn btn-link"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="column col-2 col-sm-6"&gt;
            &lt;a routerLink="/incident"&gt;&lt;button class="btn btn-primary" type="submit" [disabled]="!serviceForm.valid"&gt;Submit&lt;/button&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;!-- form --&gt;
  </code></pre>
  
  <p><strong>form .ts file</strong></p>
  
  <pre><code>@Component({
    selector: 'app-service-request',
    templateUrl: './service-request.component.html',
    styleUrls: ['./service-request.component.scss']
  })
  export class ServiceRequestComponent implements OnInit {
  
    serviceForm;
  
    countries = [
      {name: 'Choose an option'},
      {name: 'United Kingdom',},
      {name: 'United States of America',},
      {name: 'Russia',},
      {name: 'Moscow',},
      {name: 'Africa',},
    ];
  
    users = [
      {id: 'Select an option',},
      {id: '1',},
      {id: '2',},
      {id: '3',},
    ];
  
    devices = [
      {id: 'Select an option',},
      {id: '1',},
      {id: '2',},
      {id: '3',},
    ];
  
    constructor() { }
  
    ngOnInit() {
      this.serviceForm = new FormGroup({
        u_caller_id: new FormControl(this.users[0], Validators.required),
        u_destination_country: new FormControl(this.countries[0], Validators.required),
        u_requester_phone_number: new FormControl('', Validators.required),
        u_serial_number: new FormControl(this.devices[0], Validators.required),
        subject: new FormControl('', Validators.compose([
          Validators.required,
          Validators.minLength(5),
          Validators.maxLength(10)
        ])),
        issue: new FormControl('', Validators.required),
      });
    }
  
    onSubmit(serviceForm) {
      console.log("Service form submitted");
    }
  
  }
  </code></pre>
  
  <p><strong>table.html</strong></p>
  
  <pre><code>     &lt;table class="table table-striped table-hover mb-10"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Serial Number&lt;/th&gt;
              &lt;th&gt;Product&lt;/th&gt;
              &lt;!--&lt;th&gt;Building&lt;/th&gt;--&gt;
              &lt;th&gt;Floor&lt;/th&gt;
              &lt;th&gt;Address Line 1&lt;/th&gt;
              &lt;th&gt;Postal code&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr class="" *ngFor="let incident of incidents"&gt;
              &lt;td&gt;&lt;input type="radio" name="gender"&gt;
                &lt;i class="form-icon mr-5"&gt;&lt;/i&gt;{{incident.u_serial_number}}&lt;/td&gt;
              &lt;td&gt;{{incident.u_product_name}}&lt;/td&gt;
              &lt;td&gt;{{incident.u_address_floor}}&lt;/td&gt;
              &lt;td&gt;{{incident.u_address_line_1}}&lt;/td&gt;
              &lt;td&gt;{{incident.u_address_post_code}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p><strong>table.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-service-incident',
    templateUrl: './service-incident.component.html',
    styleUrls: ['./service-incident.component.scss']
  })
  export class ServiceIncidentComponent implements OnInit {
  
    incident = [ 
      {u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
      {u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
      {u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
      {u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
      {u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
      {u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
    ];
  
    incidents=this.incident;
  
  
    constructor(private service: ServicenowService) {
  
    }
  
    ngOnInit() {
      this.service.getAll().subscribe((data) =&gt; {
        console.log('Result - ', data);
      })
    }
  }
  </code></pre>