0
 <mat-form-field appearance="outline" class="example-full-width">
    <mat-label>Roles</mat-label>
    <mat-select formControlName="roles" multiple >
        <mat-option  value="role.rolName"  selected="selected.rolName" *ngFor="let role of roleList">
            {{role.rolName}}
        </mat-option>
    </mat-select>
</mat-form-field>

método que trae los datos del backend este método se lanza cuando doy clic en la opcion editar de mi tabla

getUserById(userId: number) {
    console.log('userId->', userId);
    return this.userService.getUserById(userId).subscribe((response: any) => {
      console.log('controller->', response.roles[0].rolName);
      this.userAdminFormService.fillForm(response);
    });
  }

estoy utilizando los formularios reactivos formBuilder formGroup formControlName lo que quiero es que cuando presione sobre el botón editar en el formulario aparezca seleccionado por default en el select los roles de usuario, primero se cargan por default todos los roles que un usuario podría tener pero si quiero actualizar a un usuario registrado quisiera que sus roles aparezca seleccionado por default recordales que estoy trabajando con select multiple

@Injectable({
  providedIn: 'root'
})
export class UserAdminFormService {

  public fb = new FormBuilder;

  constructor() { }

  public form = this.fb.group({
    userId: [''],
    name: ['', [Validators.required]],
    lastName: ['', [Validators.required]],
    userName: ['', [Validators.required]],
    userPassword: ['', [Validators.required]],
    userEnabled: ['', [Validators.required]],
    userEmail: ['', [Validators.required]],
    roles: ['', [Validators.required]]

  });

  public initializeForm() {
    this.form.setValue({
      userId: [''],
      name: [''],
      lastName: [''],
      userName: [''],
      userPassword: [''],
      userEnabled: [''],
      userEmail: [''],
      roles: ['']
    });
    this.form.markAsUntouched();
  }

  public fillForm(data: any) {
   
    this.form.setValue({
      userId: [data.userId],
      name: [data.name],
      lastName: [data.lastName],
      userName: [data.userName],
      userPassword: [data.userPassword],
      userEnabled: [data.userEnabled],
      userEmail: [data.userEmail],
      roles: [data.roles]
    });
  }

el resto de los datos ya se me carga pero no logro hacer que los roles aparezcan seleccionados alguna idea o documentacion que me puedan bridar gracias

introducir la descripción de la imagen aquí

5
  • como te aparece los datos del response en la parte de roles en consola y en el <mat-option value="role.rolName" ahí no seteas el "id" del rol en lugar del name? Commented el 11 may. 2021 a las 22:49
  • lastName: "gamboa" name: "vladimir" roles: Array(2) 0: {rolId: 1, rolName: "ROLE_USER"} 1: {rolId: 2, rolName: "ROLE_ADMIN"} length: 2 proto: Array(0) userAttempts: null userEmail: "[email protected]" userEnabled: true userId: 2 userName: "vladimir"
    – Gamboa
    Commented el 11 may. 2021 a las 23:06
  • saludos @JeffersonCuji esto me devuelve el response
    – Gamboa
    Commented el 11 may. 2021 a las 23:08
  • bueno lo que pensé hacer fue esto selected: Rol[] = []; este atributo lo cargo cuando me suscribo this.selected = response.roles; el response me trae sus roles del usuario a actualizar
    – Gamboa
    Commented el 11 may. 2021 a las 23:16
  • quizá podrías a ese response filtrarle con el listado de roles antes de setear los valores Commented el 12 may. 2021 a las 2:44

1 respuesta 1

0

al fin pude encontrar la solución, publico la respuesta para algunos que talvez estén buscando lo mismo y si tienen otras ideas espero que lo publiquen

 public fillForm(data: any) {
    let selected: any[] = [];
    for (let index = 0; index < data.roles.length; index++) {
      selected.push(data.roles[index].rolName);
    }
    this.form.setValue({
      userId: [data.userId],
      name: [data.name],
      lastName: [data.lastName],
      userName: [data.userName],
      userPassword: [data.userPassword],
      userEnabled: [data.userEnabled],
      userEmail: [data.userEmail],
      roles: [...selected]
    });

en el html

<mat-form-field appearance="outline" class="example-full-width">
            <mat-label>Roles</mat-label>
            <mat-select formControlName="roles" multiple>
                <mat-option *ngFor="let role of roleList;let i=index" [value]="role.rolName">
                    {{role.rolName}}
                </mat-option>
            </mat-select>
        </mat-form-field>
1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.