Primeng dynamic form dropdown (DynamicSelectModel) set data problem

UI Components for Angular
Post Reply
musti_276
Posts: 2
Joined: 20 Dec 2018, 12:37

15 Mar 2019, 09:08

Hi,

http://ng2-dynamic-forms.udos86.de/samp ... ample-form Here I am using dynamic form.



Code: Select all

  dynamicSelectModelBirims: SelectModel[] = [];

Code: Select all

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

Code: Select all

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

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

    }, 100);
    // this.getBirims();
    setTimeout(() => {
      this.getBirims();

    }, 1000);

  }

Code: Select all

   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,

        }))

Code: Select all

 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
            });
          });
        }
      }
    );

Code: Select all


    <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>

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. But when I print with console.log, the dynamicSelectModelBirims object has data. How can I solve this asynchronous problem ?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 18 guests