title: type script given error must supply value for formcontrol name id
body: <p>I have been getting the following error: 
  ERROR Error: Must supply a value for form control with name: 'id'.
  even though i have provided value for the same and here is my typescript code </p>
  
  <pre><code>import { Component, OnInit,Inject } from '@angular/core';
  import {MatDialog,MatDialogRef,MAT_DIALOG_DATA} from '@angular/material';
  import {FormGroup,FormBuilder,Validators} from '@angular/forms';
  import {AdminService} from '../../services/admin.service';
  @Component({
    selector: 'app-subcategory-modal',
    templateUrl: './subcategory-modal.component.html',
    styleUrls: ['./subcategory-modal.component.css']
  })
  export class SubcategoryModalComponent implements OnInit {
     subcategoryForm:FormGroup;
     category:any;
    constructor(public subCategoryDialogref:MatDialogRef&lt;SubcategoryModalComponent&gt;,@Inject(MAT_DIALOG_DATA)public data:string,private formBuilder:FormBuilder,private service:AdminService)
     {
        this.generateCategory();
     }
  
    ngOnInit() {
      this.createForm();
      this.generateSubcategory(this.data);
  
    }
     createForm()
     {
       this.subcategoryForm=this.formBuilder.group({
         id:[null,Validators.required],
         subcategoryName:[null,Validators.required],
         category:[null,Validators.required]
       });
     }
     generateSubcategory(data)
     {
  
       this.service.getSubcategorys(data).subscribe(res=&gt;{
           console.log(res.result);
       this.subcategoryForm.setValue({
         id:res.result.Name
       });
       },err=&gt;{
  
       });
     }
     generateCategory()
     {
       this.service.getCategory().subscribe(res=&gt;{
         this.category=res;
       });
     }
  }
  </code></pre>
  
  <p>and this is my html code :- </p>
  
  <pre><code>&lt;form [formGroup]="subcategoryForm"&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control" formControlName="id"value="" name="id"&gt;
      &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control" formControlName="subcategoryName" name="subcategoryName" &gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
    &lt;select class="form-control" name="category" formControlName="category"&gt;
        &lt;option value="0"&gt;-Select-&lt;/option&gt;
        &lt;option  *ngFor="let data of category?.result" value="{{data.id}}"&gt;{{data.Name}}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="form-group text-center"&gt;
      &lt;button type="button" class="btn btn-primary" name="button"&gt;Update&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>can anybody tell me where i'm going wrong? and why this error keeps happening?</p>