如何将 id 值绑定到 form.value 并以响应式提交数据？

Question

I am using a reactive form. I have displayed the company list as a dropdown. I want to take its id only and store it in DB with other form values.

Angular reactive

 <div class="form-group col-sm-6" for="exampleInputPassword1">  
 <div class="d-block my-3">    
 <div class="mb-3">
 <select class="custom-select"  formControlName = "companyName">
 <option value="">Choose Company</option>
<option  *ngFor="let obj of companyList; let i = index" [value]="companyList[i].companyName">{{obj.companyName}}</option>
 </select>
   </div>
  </div>
</div>

insertUser(){
this.uObj=this.form.value;
this.service.inssertUser("siteBookCreate",this.uObj).subscribe(data=>this.u  Obj=data);
}

```
<button type="button" class="btn btn-primary btn-publish"
[disabled]="form.invalid" (click)="inserUser(form.value)">Save <i style="font-size:22px;margin-left:10px;"></i> </button>

not able to get id of company

Answer 1

I guess you have id property in your company object. And instead of binding the company name with the select, bind the company object.

<div class="form-group col-sm-6" for="exampleInputPassword1">
    <div class="d-block my-3">
        <div class="mb-3">
            <select class="custom-select" formControlName="companyName">
                <option value="">Choose Company</option>
                <option *ngFor="let obj of companyList; let i = index" [value]="obj">{{obj.companyName}}</option>
            </select>
        </div>
    </div>
</div>

And get it in the TS:

insertUser(){
   this.uObj = this.form.get('companyName').value.id;
   this.service.inssertUser("siteBookCreate",this.uObj).subscribe(data=>this.uObj=data);
}

Answer 2

If you properly configured your form, it should be enough if you add this.uObj=this.form.value.companyName . If something else is missing it would be great if you could add stackblitz or something like this.

Answer 3

change the [value] attribute of your option tag

 <div class="form-group col-sm-6" for="exampleInputPassword1">  
     <div class="d-block my-3">    
      <div class="mb-3">
       <select class="custom-select"  formControlName = "companyName">
        <option value="">Choose Company</option>
          <option  *ngFor="let obj of companyList; let i = index" 
          [value]="companyList[i].companyID">    
          {{obj.companyName}}</option>
       </select>
      </div>
     </div>
    </div>