连接两个下拉菜单的值并在输入中显示 (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。希望这可以解决您的问题！

连接两个下拉菜单的值并在输入中显示 (Angular)

Concat values of two dropdowns and show in input (Angular)

javascript

typescript

primeng

angular