如何从角度的选择选项中获取多个属性值

时间:2018-08-10 11:35:09

标签: angular html5 angular-reactive-forms

html

 <select class="form-control" id="venue" name="venue1"
 formGroupName="venue" 
  (change)="venue_method($event.target.value)">
    <option hidden >Click to choose a venue...</option>
    <option [attr.value]="venue.id" *ngFor="let venue of venues"> 
       {{venue.name}}
     </option>
    <input type="hidden" formControlName="title" name="title">
  </select>

组件代码

this.rForm = fb.group({
    'venue': fb.group({
        'VenueId': [],
        'title': [],
        'isAvailable': [],
        //some more values
    }),
//some other controls and groups

});

venue_method(input: any) {
 console.log(input)
this.rForm.get('venue').patchValue({ title: input.name });
this.rForm.get('venue').patchValue({ VenueId: input.id });
this.rForm.get('venue').patchValue({isAvailable: true });
//some more patches
console.log(this.rForm.get('venue').value);
}

我想发送场地中所有属性的值,例如“ name”和“ id”,但是使用attr值,我只能修补一个值,对此合适的解决方法是什么?

注意:我不想选择增强以显示所有选项,我想从“让场地的场地”访问“场地”的所有属性。会场有一个会场名称和会场名称,当前我可以从我的“ venue_method”访问会场或会场名称。如何同时访问两者?

1 个答案:

答案 0 :(得分:2)

您需要对代码进行一些更新,如下所示。更新您的
<option [attr.value]="venue.id" *ngFor="let venue of venues">

<option value="venue | json" *ngFor="let venue of venues"> 

 <select class="form-control" id="venue" name="venue1"
 formGroupName="venue" 
  (change)="venue_method($event.target.value)">
    <option hidden >Click to choose a venue...</option>
    <option value="venue | json" *ngFor="let venue of venues"> 
       {{venue.name}}
     </option>
    <input type="hidden" formControlName="title" name="title">
  </select>

在TS中,您需要parse数据才能再次成为对象。