具有API调用选择选项的动态反应形式

时间:2019-01-02 11:48:24

标签: select angular6 angular-reactive-forms rxjs6 ionic4

我有一个动态表单,其中包含不同类型的字段。我正在使用 ion-select 显示一个下拉字段。 ion-select-options 应该从服务器获取。我是这样的:
模板代码是这样的:

    <form [formGroup]="form">
     <div *ngFor="let item of items;" class="form-row">
      <ion-list>
              <!-- SELECTION FIELD -->
              <ion-item no-lines *ngIf="item.controlType === 'dropdown'" >
                <ion-label position="floating">{{ item.label }}</ion-label>
                <ion-select [formControlName]="item.key" [disableControl]="enableOrdisable(item)">
                  <ion-select-option *ngFor="let opt of (getSelectOptions(item) | async)?.result; let i = index" value="{{ opt.key }}" >{{ opt.value }}</ion-select-option>
                </ion-select>
              </ion-item>
              <!-- TextBox FIELD -->
              <ion-item no-lines *ngIf="item.controlType === 'textbox'">
                <ion-label position="floating">{{ item.label }}</ion-label>
                <ion-input placeholder="Enter {{ item.key }}" [formControlName]="item.key" [id]="item.key" [type]="item.type" [disableControl]="enableOrdisable(item)"></ion-input>
              </ion-item>
              <!-- TextArea FIELD -->
              <ion-item no-lines *ngIf="item.controlType === 'textarea'">
                <ion-label position="floating">{{ item.label }}</ion-label>
                <ion-textarea placeholder="Enter {{ item.key }}" [formControlName]="item.key" [disableControl]="enableOrdisable(item)"></ion-textarea>
              </ion-item>
              <!-- CheckBox or Ion-Toggle FIELD -->
              <ion-item no-lines *ngIf="item.controlType === 'checkbox'">
                <ion-label position="floating">{{ item.label }}</ion-label>
                <ion-toggle slot="end" [formControlName]="item.key" (ionChange)="onChange($event, item.key)"></ion-toggle>
              </ion-item>
              <!-- Section Start FIELD -->
              <p *ngIf="item.controlType === 'dropstart'">{{ item.label }}</p>

              </ion-list>
         </div>
    </form>


这里应该从服务器中提取ion-select选项,我这样做是这样的:

getSelectOptions(item: any): Observable<any> {    
  const payload = PAY_LOAD_HERE;
  const url = SERVER_URL + SOME_END_POINT;
  return return this.http.post(`${url}`, payload);
}


但我对此没有任何回应。

0 个答案:

没有答案