CODEWITHSUNDEEP
angularprimengangular-reactive-formsangular-forms
AndreaNobili
AndreaNobili

Reputation: 42957

Why this PrimeNG dropdown is not initialized with the related form control value?

I am working on an Angular application and I am going crazy with the following problem relatedo to how valorize a PrimeNG dropdwon in this specific case.

This is the ngOnInit() method of my component.

ngOnInit(): void {
      
    this.loadEmployeesList().then(() => {this.loading = false;})

    this.assetService.currentAssetInfoMessage.subscribe(asset => {
      console.log("ASSET: ", asset);

      this.assetDetailsSelected = asset;

      this.assetDetailsForm = this.fb.group({
        asset_type: [this.assetDetailsSelected.asset_type, [Validators.required]],
        asset_model: [this.assetDetailsSelected.asset_model, [Validators.required]],
        employee_allocation: [null, [Validators.required]],
        asset_features: [this.assetDetailsSelected.asset_features, [Validators.required]],
        serial_number: [null, [Validators.required]],
        accessories: [null, [Validators.required]],
        allocation_date: [null, [Validators.required]],
        company: [null, [Validators.required]],
        notes: [null, [Validators.required]],
        invoice: [null, [Validators.required]]
      });

     if(this.assetDetailsSelected.employee_allocation) {
       console.log(this.assetDetailsSelected.employee_allocation[0].completeName);

       this.assetDetailsForm.setControl('employee_allocation',
                                         new FormControl(this.assetDetailsSelected.employee_allocation[0], Validators.required));

       
     }
      
    });

    
  }

As you can see I first retrieved the employee list used to populate my dropwown options (it works fine). Then I define a form contaning some fields. NOTE: for the interested field I had to check if this field is not null becase due to the asyncronous behavior it is not arriving immediatly so in order to not breack my application I have done:

 if(this.assetDetailsSelected.employee_allocation) {
   console.log("BLA");
   console.log(this.assetDetailsSelected.employee_allocation[0].completeName);

   this.assetDetailsForm.setControl('employee_allocation',
                                     new FormControl(this.assetDetailsSelected.employee_allocation[0], Validators.required));      
 }

When the this.assetDetailsSelected.employee_allocation is not undefined it is correctly printed and I add a nre control to my form.

Then into the HTML code of this component I have a form containing this:

<div class="row">
    <div class="col-2">
      <p>Assegnato a</p>
    </div>
    <div class="col-10">
      <p-dropdown id="employee_allocation"
                  [options]="employeesList$ | async" 
                  formControlName="employee_allocation"
                  placeholder="Impiegato" 
                  optionLabel="completeName" 
                  [showClear]="true">
      </p-dropdown>
    </div>
</div>

As you can see I am using the retrieved employeesList$ in order to populate the option. Then I want that is shown the value set in the form, this:

this.assetDetailsForm.setControl('employee_allocation',
                                     new FormControl(this.assetDetailsSelected.employee_allocation[0], Validators.required));

So as you can see I set:

 formControlName="employee_allocation"

that points to this form control that contains the object this.assetDetailsSelected.employee_allocation[0] and then I specify that the value that have to be used form this object is the completeName field, by this setting:

 optionLabel="completeName"

The problem is that when the form is rendered the value is not set:

enter image description here

As you can see it is not showing the selected value with the employee name. In the Chrome console I obtain that the output of this line: console.log(this.assetDetailsSelected.employee_allocation[0].completeName);

is: Mario Rossi that is the value that I want to be set in my dropdown.

What is wrong with my code? What am I missing? How can I try to fix it?

Upvotes: 2

Views: 1740

Answers (1)

sloth
sloth

Reputation: 101052

Make sure that the object you set as value for your form control (in your case: this.assetDetailsSelected.employee_allocation[0]) is actually in the list of possible options (in your case: employeesList$ | async).

It looks like employeesList$ | async is a list of strings, but this.assetDetailsSelected.employee_allocation[0] looks like a JSON object.

Maybe you wanted to do

this.assetDetailsForm.setControl('employee_allocation', new FormControl(this.assetDetailsSelected.employee_allocation[0].completeName, Validators.required));

Upvotes: 2

Related Questions