angular - 当从 Angular 中的 API 获取选项时，在选择的对象中设置选项

问题描述

我在 Angular 8 中做一个 Web 应用程序。我使用 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 内部，但未在表单中选中。

我创建了一个演示：https ://stackblitz.com/edit/angular-qzxixn

我的目标是在表单中设置所需的选项以显示名称，同时将整个对象保留在 formControl 中。

标签： angularangular-reactive-forms

angular - 当从 Angular 中的 API 获取选项时，在选择的对象中设置选项

问题描述

解决方案

推荐阅读