web-dev-qa-db-fra.com

Angular Matériau: Mat-Sélectionner la valeur par défaut lorsque vous utilisez des formulaires réactifs

J'ai créé un formulaire à l'aide de formulaires réactifs et angular mat-select que j'utilise pour créer un objet appelé "noya". Le noyau L'objet a 2 propriétés: "Nom" et "propriétaires". La propriété "propriétaires" est une gamme de iuer objets.

L'objet principal:

export interface ICore {
  id?: number;
  name: string;
  owners: IUser[];
}

La forme:

<form [formGroup]="parentForm">
      <mat-form-field class="example-full-width">
        <input matInput formControlName="name" placeholder="Name">
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <mat-label>Users</mat-label>
        <mat-select formControlName="owners" multiple>
          <mat-option *ngFor="let user of users" [value]="user"> {{ user.username }}</mat-option>
        </mat-select>
      </mat-form-field>
    </form>

La variable "-tilisateurs" est une matrice de tous les utilisateurs disponibles pouvant être sélectionnés.

 users: IUser[];

Le formulaire fonctionne bien, mais maintenant je souhaite utiliser le même formulaire pour éditer un objet de base et pour que je dois afficher les propriétaires de base du contrôle de formulaire "propriétaires" lorsque la page est chargée.

Création de formulaire:

  createForm() {
    this.coreForm = this.formBuilder.group({
      name: ['', [Validators.required]],
      owners: ['', [Validators.required]]
    });
  }

Comment je reçois le noyau:

getCore() {
    this.coreService.getCore(this.route.snapshot.params['id'])
      .subscribe(
        res => {
          this.core = res;
          this.updateForm();
        },
        err => this.toastr.error('Core has not been received!', 'Error!')
      );
  }

Mise à jour de formulaire (cela fonctionne pour la propriété Nom):

  updateForm() {
        this.coreForm.patchValue({
          name: this.core.name,
          owners: this.core.owners
        });
      }

Mais la liste des propriétaires n'est pas ajoutée. La chose étrange est que si je mettez à jour le formulaire avec le tilisateurs Cela fonctionne:

  getUsers() {
    this.usersService.getUsers()
    .subscribe(
      res => {
        this.users = res;
        this.coreForm.patchValue({
          owners: res
        });
      },
      err => this.toastr.error('User could not be received!', 'Error!')
    );
  }

De cette façon, tous les utilisateurs sont ajoutés en tant que valeur par défaut. Mais pour les propriétaires de base, cela ne fonctionne pas. Avez-vous une idée de ce que je fais mal ici?

Merci d'avance!

angularangular-materialangular7reactive-forms
7
NicuVlad

Je suis d'accord avec la réponse ci-dessus, je pose cela pour les utilisateurs qui ont Angular-Select et en utilisant des formulaires réactifs.

Vous pouvez utiliser le patchValue de Angular pour avoir la valeur par défaut sélectionnée.

dans votre composant dans NgonInit () ou n'importe quel endroit, vous souhaitez que votre optique de valeur choisies est une fonction PatchValue, comme ci-dessous Code:

  this.yourFrom.patchValue({
      CategoryID:1
    });
0
MJ X