Update
I was able to solve it by modifying the model so that only the role ids are listed in the roles property
constructor(private readonly activatedRoute: ActivatedRoute) {
const { user, roles } = this.activatedRoute.snapshot.data;
// @ts-ignore
this.model = { ...user, roles: user.roles.map((role) => role.id) }; // <- right here
this.roles = roles;
}
This seems to work
Having the following domain and model shape
export interface UserModel {
id: number;
username: string;
firstName: string;
lastName: string;
email: string;
roles: readonly RoleModel[];
status: boolean;
dateCreated: string;
lastUpdated: string;
}
export interface RoleModel {
id: number;
name: string;
description: string;
}
And a Formly form definition
export function UserForm(roles: readonly RoleModel[]) {
return [
...
{
key: 'roles',
type: 'select',
templateOptions: {
label: 'Roles',
valueProp: 'id',
labelProp: 'name',
required: true,
multiple: true,
options: [...roles],
},
},
];
}
And the model
{
"id": 1,
"username": "[email protected]",
"firstName": "ada",
"lastName": "wong",
"email": "[email protected]",
"roles": [
{
"id": 1,
"name": "ROLE_ADMIN",
"description": "ROLE_ADMIN"
}
],
"status": true,
"dateCreated": "2022-01-01",
"lastUpdated": "2022-01-01"
}
According to the documentation the default values are assigned according to the model. In this case I expect the values of the select to be assigned, but it is not happening this way.
This is the select state
What is the correct way to assign default values to a select multiple?