Primeng dynamic form dropdown (DynamicSelectModel) set data problem

25 views
Skip to first unread message

mustafa erdoğmuş

unread,
Mar 18, 2019, 2:12:41 AM3/18/19
to Angular and AngularJS discussion

Here I am using prime ng dynamic form.

Model

 dynamicSelectModelBirims: SelectModel[] = [];

 export class SelectModel {
    label: string;
    value: any;
 }

Constructor

constructor(private formService: DynamicFormService, private helperService: HelperService,
    private birimlerService: BirimlerService) {

    setTimeout(() => {
      this.dynamicFormCreate();
      this.formGroupValue = this.formService.createFormGroup(this.formModel);

    }, 100);

    setTimeout(() => {
      this.getBirims();

    }, 1000);

  }

new DynamicSelectModel

 FORM_MODEL.push(new DynamicSelectModel<string>({
      id: element.propertyName,
      label: element.displayName,
      placeholder: element.displayName,
      options: this.dynamicSelectModelBirims, // or this.getBirims();

      //value: "Aktif",
      //disabled: false,

    }))

getBirims(){} and DynamicSelectModel push

 getBirims() {
this.birimlerService.get().subscribe(
  (data: any) => {
    if (data.statusCode == 200) {
      this.birimler = data;


      this.birimler.data.forEach(element => {
        this.dynamicSelectModelBirims.push({
          label: element.birimAdi,
          value: element.id
        });
      });
    }
  }
);

HTML

 <div class="overflow-hidden content-margin content-padding" style="width: 100%;">
    <!-- <pre>{{ dynamicform | json }}</pre> -->
    <form [formGroup]="formGroupValue" class="ui-fluid" style="align-content: center">

        <dynamic-primeng-form [group]="formGroupValue" [layout]="layoutJson" [model]="formModel"
            (change)="onChange($event)" (pEvent)="onPEvent($event)"></dynamic-primeng-form>

    </form>

    <!-- <button type="button" class="" icon="pi pi-check"  label="Kaydet"></button> -->

</div>

empty dropdown image

The dynamic form in which I have provided code examples above must be loaded with dropdown data before loading html page. But because of the html page was previously installed, the page is loading with an empty dropdown before the service set datas to object. So the dropdown is empty. But when I print with console.log, the dynamicSelectModelBirims object has data. How can I solve this asynchronous problem ?

Reply all
Reply to author
Forward
0 new messages