Reputation: 33
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!
Upvotes: 3
Views: 2815
Reputation: 5428
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.
Upvotes: 2