title: capturing form inputs with Angular 8 reactive forms
body: <p>I want to get my forms to work how I have them set up. I needed multiple forms to have a update and delete option on every product item. The problem that I am having is that as soon as I add the [formGroup]="profileForm" directive in my form the form Controls stop working. I had trouble getting the reactive form to work because each of my forms are in a table row. <a href="https://i.stack.imgur.com/Opx0J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Opx0J.png" alt="enter image description here"></a></p>
  
  <p>I unfortunately have the data on a local server so the code won't look like the picture displayed but here is the stack-blitz if you want a closer look at my code:  <a href="https://stackblitz.com/github/RashellSmith/Dashboard-FrontEnd" rel="nofollow noreferrer">https://stackblitz.com/github/RashellSmith/Dashboard-FrontEnd</a></p>
  
  <p>update product ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Product } from '../model/Product';
  import { Category } from '../model/Availability';
  import { Supplier } from '../model/Supplier';
  import { Home } from '../model/Home';
  import { HomeService } from '../service/Home.service';
  import { SupplierService } from '../service/Supplier.service';
  import { CategoryService } from '../service/Category.service';
  import { FormGroup, FormControl } from '@angular/forms'
  @Component({
    selector: 'app-update-product',
    templateUrl: './update-product.component.html',
    styleUrls: ['./update-product.component.scss']
  })
  export class UpdateProductComponent implements OnInit {
    availability:boolean;
    category:number;
    orderBy: String;
    Ascdesc: String;
    page = 0;
    home: Home[];
    categories: Category[];
    supplier: Supplier[];
    selectedCategory: Category;
    edit: boolean = false;
    public currentProduct: number;
  
    toogleEditMode() {
      this.edit = this.edit ? false : true; 
    }
  
    selectCategory (category) {
         this.category = category.category;
     }
  
     available(boolean){
  
      this.availability = boolean;
      }
  
      update($event){
        this.homeService.getByParm(this.availability,this.category).subscribe(data =&gt; {
          this.home = data;
        }); 
  
      }
      profileForm = new FormGroup({
        id: new FormControl(''),
        name: new FormControl(''),
        category: new FormControl(''),
        fullPrice: new FormControl(''),
        salePrice: new FormControl(''),
        availability: new FormControl(''),
        supplier: new FormControl(''),
        discount: new FormControl(''),
  
      });
  
  // model = {id: null, productName: '', category: {category: null, categoryName: null}, fullPrice: '', salePrice:'', availability: false, supplier: {supplier:null,supplierName:""},discount:null};
  // json = JSON.stringify(this.model);
  constructor(private homeService: HomeService,private supplierService: SupplierService,private categoryService: CategoryService) { }
  
  name = new FormControl('');
  
  SortPrice($event:any){
    let icon = document.getElementById("asc-desc1");
    if(icon.className === "fas fa-angle-down"){
      icon.className ="fas fa-angle-up";
      this.homeService.getByPriceAsc().subscribe(data =&gt; {
      this.home = data;
    });
    }else{
      icon.className ="fas fa-angle-down"
      this.homeService.getByPriceDesc().subscribe(data =&gt; {
        this.home = data;
      });
    };
  
  }
  // model = new Newproduct(null,new Category( this.value,"name"),null,null,false,new Supplier(null,null),null);
  
  
  onSubmit() {
    // TODO: Use EventEmitter with form value
    // console.warn(this.profileForm.value);
  }
  SortSale($event:any){
    let icon = document.getElementById("asc-desc2");
    if(icon.className === "fas fa-angle-down"){
      icon.className ="fas fa-angle-up";
      this.homeService.getBySaleAsc().subscribe(data =&gt; {
      this.home = data;
    });
    }else{
      icon.className ="fas fa-angle-down"
      this.homeService.getBySaleDesc().subscribe(data =&gt; {
        this.home = data;
      });
    };
  
  }
  SortDiscount($event:any){
    let icon = document.getElementById("asc-desc3");
    if(icon.className === "fas fa-angle-down"){
      icon.className ="fas fa-angle-up";
      this.homeService.getByDiscountAsc().subscribe(data =&gt; {
      this.home = data;
    });
    }else{
      icon.className ="fas fa-angle-down"
      this.homeService.getByDiscountDesc().subscribe(data =&gt; {
        this.home = data;
      });
    };
  
  }
  
  
  ngOnInit() {
    this.supplierService.getAll().subscribe(data =&gt; {
      this.supplier = data;
    });
  
      this.homeService.getAll().subscribe(data =&gt; {
      this.home = data;
    });
    this.categoryService.getAll().subscribe(data =&gt; {
      this.categories = data;
    });
  
  }
  
  }
  </code></pre>
  
  <p>update product html</p>
  
  <pre><code>
    &lt;!-- Table --&gt;
    &lt;form  [formGroup]="profileForm" (ngSubmit)="onSubmit()"&gt;
        &lt;p&gt;
            Form Status: {{profileForm.value |json}}
          &lt;/p&gt;
    &lt;div class="table-responsive"&gt;
  
      &lt;table  class="table table-bordered table-striped"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Id&lt;/th&gt;
          &lt;th&gt;Product&lt;/th&gt;
          &lt;th&gt;Category&lt;/th&gt;
          &lt;th&gt;FullPrice &lt;i id ="asc-desc1"class="fas fa-angle-down" (click)="SortPrice($event)"&gt;&lt;/i&gt;&lt;/th&gt;
          &lt;th&gt;Saleprice &lt;i id ="asc-desc2"class="fas fa-angle-down" (click)="SortSale($event)"&gt;&lt;/i&gt; &lt;/th&gt;
          &lt;th&gt;Availablity&lt;/th&gt;
          &lt;th&gt;Supplier&lt;/th&gt;
          &lt;th&gt;Discount&lt;i id ="asc-desc3"class="fas fa-angle-down" (click)="SortDiscount($event)"&gt;&lt;/i&gt;&lt;/th&gt;
          &lt;th&gt;Edit&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
  
          &lt;tr  *ngFor="let home of home | paginate:{itemsPerPage:20,currentPage: p} ; index as i"&gt;
          &lt;ng-container *ngIf="editMode !== i"&gt;
          &lt;td [attr.data-index]="i"&gt;{{home.id}}&lt;/td&gt;
          &lt;td&gt;{{home.productName}}&lt;/td&gt;
          &lt;td&gt;{{home.category.categoryName}}&lt;/td&gt;
          &lt;td&gt;{{home.fullPrice}}&lt;/td&gt;
          &lt;td&gt;{{home.salePrice}}&lt;/td&gt;
          &lt;td&gt;{{home.availability}}&lt;/td&gt;
          &lt;td&gt;{{home.supplier.supplierName}}&lt;/td&gt;
          &lt;td&gt;{{home.discount }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container *ngIf="editMode === i"&gt;
  
            &lt;td&gt;&lt;input class="form-control" id="id"  formControlName="id" placeholder={{home.id}}&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input class="form-control" id="name"  formControlName="productName" placeholder={{home.productName}}&gt; Value: {{ profileForm.productName.value }}&lt;/td&gt;
            &lt;td&gt;&lt;input class="form-control" id="categoryname" [formControl]="category" placeholder={{home.category.categoryName}}&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input class="form-control" id="fullprice"  [formControl]="fullPrice" placeholder={{home.fullPrice}}&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input class="form-control" id="saleprice"   [formControl]="salePrice" placeholder={{home.salePrice}}&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input class="form-control" id="availability"  [formControl]="availability" placeholder={{home.availability}}&gt;&lt;/td&gt;
            &lt;td&gt;
              &lt;select class="form-control"&gt;
                &lt;option *ngFor="let supplier of suppliers"&gt;{{supplier.supplierName}}&lt;/option&gt;
              &lt;/select&gt;
            &lt;/td&gt;
            &lt;td&gt;&lt;input class="form-control" id="discount" placeholder={{home.discount}}&gt;&lt;/td&gt;
  
          &lt;/ng-container&gt;
  
  
        &lt;!-- if assigned index to editMode matches --&gt;
  
          &lt;td class="text-right" id="tableDataBtns"&gt;
            &lt;div class="btn-group" role="group"&gt;
              &lt;button (click)="editMode === i ? editMode = null : editMode = i" data-toggle="modal" data-target="#updateProduct" type="button" class="btn btn-secondary"&gt;
                &lt;ng-container *ngIf="editMode === i"&gt;&lt;i class="far fa-save"&gt;&lt;/i&gt;&lt;/ng-container&gt;
                &lt;ng-container *ngIf="editMode !== i"&gt;&lt;i class="far fa-edit"&gt;&lt;/i&gt;&lt;/ng-container&gt;
              &lt;/button&gt;
              &lt;button type="button" data-toggle="modal" data-target="#deleteProduct" class="btn btn-danger"&gt;&lt;i class="far fa-trash-alt"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;div&gt;
            &lt;select &gt;
              &lt;option *ngFor="let supplier of suppliers" [ngValue]="supplier"&gt;{{supplier.supplierName}}&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
  
  
  
  
        &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;pagination-controls class="myPagination" (pageChange)="p= $event"&gt;&lt;/pagination-controls&gt;
    &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>