两个下拉列表的Concat值并在输入中显示（Angular）

Question

我有2个下拉菜单。这是组件的html代码。

<div class="form-group">
      <label>{{l("RoomType")}}</label>
     <p-dropdown [disabled] = "!roomTypes.length"  [options]="roomTypes" autoWidth="false"  [style]="{'width':'100%'}" name="roomTypes" [autoWidth]="true" [(ngModel)]="room.roomTypeId"></p-dropdown>
</div>

<div class="form-group">
        <label>{{l("RoomNumber")}}</label>
        <p-dropdown [disabled] = "!roomNumbers.length"  [options]="roomNumbers" autoWidth="false"  [style]="{'width':'100%'}" name="numberRoom" [autoWidth]="true" [(ngModel)]="room.roomNumber"></p-dropdown>
</div>  

以下是他们如何填充ts

getRoomTypes(): void {
    this._roomTypeService.getRoomTypesDropdownValues().subscribe(r => {
        r.items.forEach((value) => {
            this.roomTypes.push({label: value.name, value: value.id});
        });
    });
}

getRoomNumber(): void {
    for (let i = 1; i <= 10; i++) {
        this.roomNumbers.push({label: i.toString(), value: i});
    }
}

在那些下拉菜单之后，我有一个输入字段，我需要填充1 + 2下拉列表的concat标签。

这是输入字段

<div class="form-group"> 
                    <label>{{l("RoomName")}}</label>
                    <input #roomNameInput="ngModel" class="form-control" type="text" name="roomName" [(ngModel)]="room.roomName"   maxlength="32">
                </div>

我尝试在两个下拉菜单上像这个(ngModelChange)="setRoomName(room.roomTypeId,room.roomNumber)"这样做。但它只是获得选项的ID。

我怎样才能正确地连接这些标签？

Answer 1

我建议你使用反应形式，一切都更干净，更容易理解。使用反应形式我会做这样的事情：

在模板中：

<form [formGroup]="roomForm">
  <select class="form-control" formControlName="roomType">
    <option *ngFor="let opt of types" [ngValue]="opt">{{ opt.label }}</option>
  </select>
  <select class="form-control" formControlName="roomNumber">
    <option *ngFor="let opt of nums" [ngValue]="opt">{{ opt.label }}</option>
  </select>
  <input class="form-control" formControlName="inputString"/>
</form>

在组件中：

export class Component   implements OnInit {
  nums  = [{label: 'label 1', value: 1 }, {label: 'label 2', value: 2}, {label: 'label 3', value: 3}];
  types = [{label: 'label a', value: 'a'}, {label: 'label b', value: 'b'}, {label: 'label c', value:'c'}];
  inputNum: string = '';
  inputType: string = '';
  subs: Subscription[] = [];

  roomForm: FormGroup;

  ngOnInit() {
    this.roomForm = new FormGroup({
      roomType: new FormControl(),
      roomNumber: new FormControl(),
      inputString: new FormControl()
    })
    this.subs.push(
      this.roomForm.get('roomType').valueChanges.subscribe((val) => {
        this.inputType = val.label;
        this.roomForm.get('inputString').setValue(this.inputNum + this.inputType);
      })
    )

    this.subs.push(
      this.roomForm.get('roomNumber').valueChanges.subscribe((val) => {
        this.inputNum = val.label;
        this.roomForm.get('inputString').setValue(this.inputNum.toString() + this.inputType);
      })
    )
  }
}

要使用反应形式，您必须在模块ReactiveFormsModule中导入。希望这可以解决您的问题！