Конкретные значения двух выпадающих списков и отображения на входе (угловые) - PullRequest
Новая
       10

Конкретные значения двух выпадающих списков и отображения на входе (угловые)

0 голосов
/ 12 апреля 2019

У меня 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>

Вот как они заселились в ТС 

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});
    }
}

после этих выпадающих списков у меня есть поле ввода, которое необходимо заполнить меткой concat с выпадающим списком 1 + 2.

Вот это поле ввода 

<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)" в обоих выпадающих списках. Но это просто получение идентификатора опций.

Как я могу правильно соединить эти метки?

1 Ответ

0 голосов
/ 12 апреля 2019

Я предлагаю вам использовать реактивную форму, все гораздо понятнее и проще для понимания.Используя реактивную форму, я сделаю что-то вроде этого:

в шаблоне: 

<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.Надеюсь, что это может решить вашу проблему!

...