3
votes

Comment définir la valeur dans la sélection de tapis angulaire lors du chargement d'un composant?

J'ai utilisé la boîte de sélection de tapis de matériau angulaire (" @ angular / material": "7.1.0 "), puis j'ai utilisé le contrôle de formulaire au lieu du modèle ng, maintenant le problème est que je peux ' t définir la valeur lors du chargement du composant. Je dois définir la première valeur sur la zone de sélection de tapis dans la liste, j'ai essayé mais je ne peux pas le faire.

J'ai créé un code chez stackblitz, voici le lien: https://stackblitz.com/ modifier / angular-zt1a9f

Veuillez m'aider à ce sujet.

angular angular-material angular-forms

1 commentaires

J'ajouterais du code à la question, puis je lierais stackblitz pour vérifier les détails.

4 Réponses :

3
votes

Utilisez compareWith pour sélectionner la valeur par défaut en comparant le nom à l'intérieur de la fonction de comparaison. Notez également que j'ai changé la liaison value en [(value)] = "animal" . Et supprimé selectedValue . Vous sélectionnez la valeur par défaut en l'attribuant dans le formControl , regardez ci-dessous les changements dans le composant.

export class AppComponent  {

  animals = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
  ];  

  myGroup = new FormGroup({
      animalControl: new FormControl(this.animals[1], [Validators.required]) //I'm assigining Cat by using this.animals[1], you can put any value you like as default.
  });


  compareThem(o1, o2): boolean{
    console.log('compare with');
    return o1.name === o2.name;
  }
}

Dans votre composant, ajoutez:

<form [formGroup]="myGroup">
<mat-form-field>
  <mat-select placeholder="Favorite animal" [compareWith]="compareThem" formControlName="animalControl" required >
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [(value)] ="animal"  >
      {{animal.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
</form>

1 commentaires

@Aragom, vous avez [ngValue] = "animal.name", doit être [ngValue] = "animal"

1
votes

Thilagabahan, si la [valeur] est animals.name

    selectedValue = this.animals[0].name;
    myGroup = new FormGroup({
      animalControl: new FormControl(this.selectedValue, [Validators.required])
  });

simplement, lorsque vous créez le formulaire, donnez la valeur (sinon regardez la réponse d'Aragom)

<mat-option *ngFor="let animal of animals" [value]="animal.name">

Voir que le dernier est de créer le formGroup

0 commentaires

0
votes

Lorsque vous affectez l'ensemble de l'objet animal à la valeur de mat-option , alors dans ce cas
vous devez utiliser une liaison de données bidirectionnelle pour fournir la valeur d'option sélectionnée.

Utilisez la liaison de données bidirectionnelle en tant que [(ngModel) ="selectedValue"
au lieu de [(value) ] = "selectedValue" dans le code de votre application, et cette variable selectedValue sera du type objet animal que vous attribuez à l'option mat-option as

ngOnInit() {
  this.selectedValue =  this.animals[0]; // selecting first aninmal object as default value
}

Et maintenant, assignez cette variable dans ngOnint () comme

<mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
</mat-option>`

Démo Stackblitz - définition de la valeur de sélection de tapis lors du chargement du composant

0 commentaires

0
votes

Voici l'exemple

compareFn(c1: Country, c2: Country): boolean {
    if(c1 && c2) {
       (c1.id || c2.id) ? c1.id === c2.id : c1 === c2;
    }
}

Si vos options ne contiennent pas l'identifiant, votre compareFn sera comme ci-dessous:

<mat-select [compareWith]="compareFn" [(ngModel)]="defaultItem">
    <mat-option *ngFor="let country of countries" [value]="item">
        {{country.name}}
    </mat-option>
</mat-select>

compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

Ref1: https: //material.angular. io / components / select / overview # getting-and-setting-the-select-value Ref2: https://angular.io/api/forms/SelectControlValueAccessor#customizing- sélection d'options

0 commentaires