0

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

enter image description here

What is the correct way to assign default values to a select multiple?

2 Answers 2

1

You need to set the defaultValue field as an array.

{
      key: 'roles',
      type: 'select',
      defaultValue: ['selected1', 'selected2'...],

Best guess applied:

export function UserForm(roles: readonly RoleModel[], user: UserModel) {
// ...
    defaultValue: user.roles.map(role => role.id),
2
  • Thanks for answering. I see. Seems like a better option than modifying the model as I described in the update.
    – Mario
    Aug 3, 2022 at 16:33
  • I am implementing the described but for some reason it is not working
    – Mario
    Aug 3, 2022 at 16:39
0

As read in the default values example

There are two ways to initialize the form with default values.

Default the model (preferred)
Use the defaultValue option on the field

Both methods are demonstrated below.

And as described in the properties and options guide regarding the defaultValue field

If this is provided and the value of the model at compile-time is undefined, then the value of the model will be assigned the defaultValue.

The solution was to modify the model, assigning only the id of the roles to the role field of the model. The solution proposed by MoxxiManagarm also works, except that you will have to set the value of the roles property to undefined or omit it to obtain the desired result.

Solution:

constructor(private readonly activatedRoute: ActivatedRoute) {
  const { user, roles } = this.activatedRoute.snapshot.data;

  this.model = {
    ...user,
    roles: user.roles.map((role: { id: number }) => role.id),
  };
  this.roles = roles;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.