Primeng p-selectButton doesn't work with Reactive Forms

Question

I'm using a reactive form with I have a p-selectButton with a formControlName "role".

What I want to do is, put active p-selectButton option with my the received data from my user, but this doesn't work. I don't found a solution in the documentation because only shows how to use it with [(ngModel)]...

this is my code:

ts

this.form = new FormGroup({
        role: new FormControl(null, Validators.required)
});

html

<p-selectButton [options]="roles" formControlName="role" optionLabel="name" multiple="multiple"></p-selectButton>

All my p-selectButtons options, "roles":

[
  0:
    _id: "5e00a7240742771f183a9f55"
    name: "ADMIN"
    role: "ADMIN_ROLE"
  1:
    _id: "5e00bf010930fa2b5c7d92a1"
    name: "Ventas"
    role: "USER_ROLE"
  ]

The p-selectedButton I want to active from my user:

user: {
    role: [
       0: {
         _id: "5e00a7240742771f183a9f55"
         name: "ADMIN"
         role: "ADMIN_ROLE"
       }
    ]
 }

And this is how I introduce the selected data in my form (I don't know, Is this the best way? :D)

this.form.get('role').setValue(user.role);

If I show in console the form.value.role I can see the expected value, but in the frontend doesn't show the active p-selectButton!!! I have left something?????

Thanks in advance!

Answer 1

This is happening because you set the multiple attribute to true. This lets the p-selectButton expect an Array as underlying model. Hence, you need to initialize it to an array and set the value to an Array with one entry as well.

public form:FormGroup = this.fb.group({
  role: [[], [Validators.required]] // Array as value
});

constructor(
  private fb:FormBuilder
) {}

ngOnInit() {
   // You can set this everywhere else as well, and yes, this way of setting a value is okay
   this.form.get('role').setValue([this.roles[1]]); // Array with 1 entry as value
}

A small pitfall though is, that the p-selectButton determines the entries to be equal by Object reference. So the values in the array need to be the same object, not just an object that has the same values. So if you have a user that contains a role object, the easiest way would be to find the corresponding role object in your roles array by _id;

// Your array that is bound to [options]
public roles = [{
  _id: "5e00a7240742771f183a9f55",
  name: "ADMIN"   
  role: "ADMIN_ROLE"
}, {
  _id: "5e00bf010930fa2b5c7d92a1",
  name: "Ventas",
  role: "USER_ROLE"
}];

// Your user, this will most likely come from somewhere else, but I suspect it looks like this
public user = {
  // ... some other properties
  role: {
    _id: "5e00a7240742771f183a9f55",
    name: "ADMIN",
    role: "ADMIN_ROLE"
  }
}

public form:FormGroup = this.fb.group({
  role: [[], [Validators.required]]
});

constructor(
  private fb:FormBuilder
) {}

ngOnInit() {
  this.form.get('role').setValue([
    // Find the role that the user has and use the object from roles array
    this.roles.find(role => role._id === this.user.role._id)
  ]);
}

Here a working Stackblitz.