Установить значение по умолчанию в раскрывающемся списке в зависимости от другого значения - PullRequest
Новая
       0

Установить значение по умолчанию в раскрывающемся списке в зависимости от другого значения

2 голосов
/ 27 января 2020

Я борюсь с Реактивные формы , у меня есть каскадный выпадающий список, который может иметь значение по умолчанию, если пользователь выбрал существующий проект на первой странице (проблема на этой странице), если пользователь хочет создать проект, тогда раскрывающийся список не отображает никакого значения.

Так вот в чем проблема:

Когда пользователь приходит из существующего проекта , прайс-лист выбран, но кажется, что это не имеет никакого значения, потому что валюта не показана. Когда я снова выбираю прайс-лист валюты, выбранной автоматически, как и ожидалось, у кого-нибудь есть решение для этого? Спасибо заранее.

enter image description here

Вот пример кода, спасибо за ваше время

JSON (возвращается из pageChanged () )

enter image description here

Component.ts (автоматический выбор значений) 

  pageChanged(event){
const current = this.currentPage = event;
return this.httpClient.get<QuotationsInterface>(`this.url${this.projectId}?page=${current}&token=${this.token.token}`)
  .subscribe(
    data => {
      console.log('GET PROJECT BY ID OK',data);
      this.project = data.project;
      this.registerForm.controls['pricelist'].setValue(this.project.pricelist_id);
      this.registerForm.controls['currency'].setValue(this.project.currency_id);
    },
    error => {
      console.log("PAGE PROJECT FAILED", error)
    }
  )

}

Компонент. html

<div class="flex2 pl10" (change)="selectedPriceListIndex = $event.target.selectedIndex-1">
  <select formControlName="pricelist" class="form-control"  [ngClass]="{'is-invalid': submitted && f.pricelist.errors}" >
    <option value="" disabled selected>Select a Pricelist</option>
    <option   *ngFor="let p of filter.ListPricelist;let i = index;" [ngValue]="p.id"  id="pricelist_id" >{{i}} {{p.label}}</option>
  </select>
  <div *ngIf="submitted && f.pricelist.errors" class="invalid-feedback">
    <div *ngIf="f.pricelist.errors.required">Pricelist is required</div>
  </div>
</div>
  <div class="flex2 pl10">
  <select formControlName="currency" [ngClass]="{'is-invalid': submitted && f.currency.errors}" class="form-control">
    <option value >Select a currency</option>
    <option  *ngFor="let c of filter.ListPricelist[selectedPriceListIndex]?.currencies" [ngValue]="c.id" selected="selected">{{c.code}}</option>
  </select>
    <div *ngIf="submitted && f.currency.errors" class="invalid-feedback">
      <div *ngIf="f.currency.errors.required">Currency is required</div>
    </div>
  </div>

РЕДАКТИРОВАТЬ:

Спасибо всем за ответы. Я заставил его работать, используя .patchValue (проверьте ответ @nima_amr), а также заменив в component.html

<option  *ngFor="let c of filter.ListPricelist[selectedPriceListIndex]?.currencies" [ngValue]="c.id" selected="selected">{{c.code}}</option>

следующим: 

<option  *ngFor="let c of filter.ListPricelist[registerForm.value.pricelist-1]?.currencies"  [value]="c.id">{{c.code}}</option>

Ответы [ 2 ]

1 голос
/ 27 января 2020

Вы можете заменить .setValue на .patchValue как Down 

  pageChanged(event){
const current = this.currentPage = event;
return this.httpClient.get<QuotationsInterface>(`this.url${this.projectId}?page=${current}&token=${this.token.token}`)
  .subscribe(
    data => {
      console.log('GET PROJECT BY ID OK',data);
      this.project = data.project;
      this.registerForm.patchValue({
        pricelist:  this.project.pricelist_id,
        currency:   this.project.currency_id
      });
    },
    error => {
      console.log("PAGE PROJECT FAILED", error)
    }
  )

}

0 голосов
/ 27 января 2020

Вы можете просто связать значение по умолчанию в выбранной части и передать, какое значение вы хотите показать как значение по умолчанию. например 

<select name="bindDefault" [(ngModel)]="bindedValue"> </select>

и вы можете передать значение bindedValue из ts в качестве значения по умолчанию.

демо здесь

...