title: Default Select option Angular 8 Reactive forms
body: <p>I want to get all my data from my API and set them as defaults for my reactive form. I was able to bind all the values using <code>ngModel</code>. I just don't know how I can do this with my <code>select</code>. In my HTML I am getting my 1st select option from my home service. The second option onward, I am using my category service to display all the categories. I did this so that I am able to have defaults according to the product I currently have selected. The main problem I am running into is that I want to bind the ngModel to the first option so that by default if I were to submit my form it would be the first option submitted. I have seen people use patch value to do this but my problem is I don't know how to do this with the data I am getting through my html because it's being displayed in the html not in the the ts file. Using <code>ngModel</code>is the best solution I could come with.</p>
  <pre><code>html
  
    &lt;!-- Table --&gt;
    &lt;form  [formGroup]=&quot;updateProduct&quot; &gt;
        &lt;p&gt;
            Form Status: {{updateProduct.value |json}}
          &lt;/p&gt;
    &lt;div class=&quot;table-responsive&quot;&gt;
       
      &lt;table  class=&quot;table table-bordered table-striped&quot;&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 =&quot;asc-desc1&quot;class=&quot;fas fa-angle-down&quot; (click)=&quot;SortPrice($event)&quot;&gt;&lt;/i&gt;&lt;/th&gt;
          &lt;th&gt;Saleprice &lt;i id =&quot;asc-desc2&quot;class=&quot;fas fa-angle-down&quot; (click)=&quot;SortSale($event)&quot;&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 =&quot;asc-desc3&quot;class=&quot;fas fa-angle-down&quot; (click)=&quot;SortDiscount($event)&quot;&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=&quot;let home of home | paginate:{itemsPerPage:20,currentPage: p} ; index as i&quot;&gt;
          &lt;ng-container *ngIf=&quot;editMode !== i&quot;&gt;
          &lt;td&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=&quot;editMode === i&quot;&gt;
            
            &lt;td&gt;&lt;input class=&quot;form-control&quot; id=&quot;id&quot;  formControlName=&quot;id&quot; [(ngModel)]=&quot;home.id&quot; disabled&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input class=&quot;form-control&quot; id=&quot;productName&quot;  formControlName=&quot;productName&quot; [(ngModel)]=&quot;home.productName&quot;&gt;&lt;/td&gt;
            &lt;td&gt;
                &lt;select class=&quot;form-control&quot; formControlName=&quot;category&quot; &gt;
                  &lt;option selected=&quot;selcected&quot;  class=&quot;opt1&quot; &gt;{{home.category.categoryName}}&lt;/option&gt;
                  &lt;option *ngFor=&quot;let category of categories&quot;&gt;{{category.categoryName}}&lt;/option&gt;
                &lt;/select&gt;
              &lt;/td&gt;
            &lt;td&gt;&lt;input class=&quot;form-control&quot; id=&quot;fullprice&quot; formControlName=&quot;fullPrice&quot; [(ngModel)]=&quot;home.fullPrice&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input class=&quot;form-control&quot; id=&quot;saleprice&quot;   formControlName=&quot;salePrice&quot; [(ngModel)]=&quot;home.salePrice&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;checkbox&quot; class=&quot;form-control&quot; id=&quot;availability&quot;  formControlName=&quot;availability&quot; [(ngModel)]=&quot;home.availability&quot;&gt;&lt;/td&gt;
            &lt;td&gt;
              &lt;select class=&quot;form-control&quot; formControlName=&quot;supplier&quot;&gt;
                &lt;option selected=&quot;selcected&quot; class=&quot;opt1&quot;&gt;{{home.supplier.supplierName}}&lt;/option&gt;
                &lt;option *ngFor=&quot;let supplier of suppliers&quot;&gt;{{supplier.supplierName}}&lt;/option&gt;
              &lt;/select&gt;
            &lt;/td&gt;
            &lt;td&gt;&lt;input class=&quot;form-control&quot; id=&quot;discount&quot; formControlName=&quot;discount&quot;[(ngModel)]=&quot;home.discount&quot;&gt;&lt;/td&gt;
       
          &lt;/ng-container&gt;
  
  
        &lt;!-- if assigned index to editMode matches --&gt;
        
          &lt;td class=&quot;text-right&quot; id=&quot;tableDataBtns&quot;&gt;
            &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
              &lt;button (click)=&quot;editMode === i ? editMode = null : editMode = i&quot; data-toggle=&quot;modal&quot; data-target=&quot;#updateProduct&quot; type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;
                &lt;ng-container *ngIf=&quot;editMode === i&quot;&gt;&lt;i class=&quot;far fa-save&quot;&gt;&lt;/i&gt;&lt;/ng-container&gt;
                &lt;ng-container *ngIf=&quot;editMode !== i&quot;&gt;&lt;i class=&quot;far fa-edit&quot;&gt;&lt;/i&gt;&lt;/ng-container&gt;
              &lt;/button&gt;
              &lt;button type=&quot;button&quot; data-toggle=&quot;modal&quot; data-target=&quot;#deleteProduct&quot; class=&quot;btn btn-danger&quot;&gt;&lt;i class=&quot;far fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;pagination-controls class=&quot;myPagination&quot; (pageChange)=&quot;p= $event&quot;&gt;&lt;/pagination-controls&gt;
    &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  <pre><code>ts
  
  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[];
    suppliers: 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;
        }); 
    
      }
      updateProduct = new FormGroup({
        id: new FormControl(''),
        productName: 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:&quot;&quot;},discount:null};
  // json = JSON.stringify(this.model);
  constructor(private homeService: HomeService,private supplierService: SupplierService,private categoryService: CategoryService) { }
   
  
  SortPrice($event:any){
    let icon = document.getElementById(&quot;asc-desc1&quot;);
    if(icon.className === &quot;fas fa-angle-down&quot;){
      icon.className =&quot;fas fa-angle-up&quot;;
      this.homeService.getByPriceAsc().subscribe(data =&gt; {
      this.home = data;
    });
    }else{
      icon.className =&quot;fas fa-angle-down&quot;
      this.homeService.getByPriceDesc().subscribe(data =&gt; {
        this.home = data;
      });
    };
    
  }
  // model = new Newproduct(null,new Category( this.value,&quot;name&quot;),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(&quot;asc-desc2&quot;);
    if(icon.className === &quot;fas fa-angle-down&quot;){
      icon.className =&quot;fas fa-angle-up&quot;;
      this.homeService.getBySaleAsc().subscribe(data =&gt; {
      this.home = data;
    });
    }else{
      icon.className =&quot;fas fa-angle-down&quot;
      this.homeService.getBySaleDesc().subscribe(data =&gt; {
        this.home = data;
      });
    };
    
  }
  SortDiscount($event:any){
    let icon = document.getElementById(&quot;asc-desc3&quot;);
    if(icon.className === &quot;fas fa-angle-down&quot;){
      icon.className =&quot;fas fa-angle-up&quot;;
      this.homeService.getByDiscountAsc().subscribe(data =&gt; {
      this.home = data;
    });
    }else{
      icon.className =&quot;fas fa-angle-down&quot;
      this.homeService.getByDiscountDesc().subscribe(data =&gt; {
        this.home = data;
      });
    };
    
  }
  
  
  ngOnInit() {
    this.supplierService.getAll().subscribe(data =&gt; {
      this.suppliers = data;
    });
    
      this.homeService.getAll().subscribe(data =&gt; {
      this.home = data;
    });
    this.categoryService.getAll().subscribe(data =&gt; {
      this.categories = data;
    });
    
  }
  
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/YFc18.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YFc18.png" alt="Image" /></a></p>