Установите опцию в выборе объектов, когда опции выбираются из API в Angular - PullRequest
Новая
       4

Установите опцию в выборе объектов, когда опции выбираются из API в Angular

0 голосов
/ 24 марта 2020

Я делаю веб-приложение в Angular 8. Я использую Reactive Forms, и у меня есть выбор, который я заполняю при получении API. Опции, которые я получаю от API, представляют собой массив таких объектов: 

[
   {id: 1, name: 'Number one', requireDocumentNumber: true},
   {id: 2, name: 'Number two', requireDocumentNumber: true},
   {id: 3, name: 'Number three', requireDocumentNumber: false},
]

Я использую ngValue в выборке, чтобы сохранить весь объект внутри formControl. 

<form [formGroup]="form">
         <div class="form-group">
            <label for="reasonSelect">Select an option</label>
               <select class="form-control"
                    formControlName="reason"
                    id="reasonSelect">
                  <option *ngFor="let r of reasonList" [ngValue]="r">
                     {{r.name}}
                  </option>
                 </select>
           </div>
       </form>

Я использую setValue для установки нужного объекта в formControl, но опция не выбрана в форме. 

reasonList: IReason[] = [];
  form: FormGroup;
  objectToAssign = {
    id: 2, 
    name: 'Number two', 
    requireDocumentNumber: true
    };

  constructor(
    private fb: FormBuilder,
  ) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      reason: [null, Validators.required],
    });

    // async reasons
    of(this.getReasons())
    .delay(2000)
    .subscribe(r => {
      this.reasonList = r;
      // setValue
      this.form.get('reason').setValue(this.objectToAssign);
    });
  }

  getReasons() {
    return [
      {id: 1, name: 'Number one', requireDocumentNumber: true},
      {id: 2, name: 'Number two', requireDocumentNumber: true},
      {id: 3, name: 'Number three', requireDocumentNumber: false},
    ];
  }

Объект находится внутри formControl, но это не выбран в форме.

enter image description here

Я создал демо: https://stackblitz.com/edit/angular-qzxixn

Моя цель установить желаемую опцию в форме для отображения имени, сохраняя весь объект внутри formControl.

1 Ответ

0 голосов
/ 24 марта 2020

Вы должны изменить this.form.get('reason').setValue(this.objectToAssign); на this.form.get('reason').setValue(this.reasonList[1]);, и он будет выбран при выборе после выбора параметров из вашего API.

...