1
votes

Matériau angulaire Mat-Select ngModel Valeur booléenne Ne fonctionne pas

J'utilise mat-select Pour sélectionner le sexe d'un utilisateur dans le projet angular 7 et le matériau angulaire

        <mat-option [value]="'false'">Women</mat-option>
        <mat-option [value]="'true'">Men</mat-option>

userProfile obtient du serveur et la propriété isMale est de type booléen mais après obtenir les données, ne montre pas la valeur sélectionnée sur mat-select J'utilise aussi de cette façon mais je ne fonctionne pas

 <mat-form-field>
          <mat-select placeholder="Gender" required 
            formControlName="isMale" 
            [(ngModel)]="userProfile.isMale">
            <mat-option value="false">Women</mat-option>
            <mat-option value="true">Men</mat-option>
          </mat-select>
          <mat-hint align="end">Please Select...</mat-hint>
          <mat-error *ngIf="isControlHasError('isMale','required')"><strong>Please Select Gender</strong>
          </mat-error>
        </mat-form-field>

mais cela ne fonctionne pas

angular angular-material ngmodel

0 commentaires

3 Réponses :

2
votes

Il semble que vous utilisez formControlName et [(ngModel)] ensemble. Dans angulaire 7, nous ne pouvons pas les utiliser ensemble. C'est peut-être pour cette raison que votre ngModel ne fonctionne pas.

Vous pouvez utiliser la méthode suivante pour obtenir la valeur sélectionnée:

formName.controls['isMale'].setValue(true);

et vous pouvez définir la valeur sur ce contrôle de formulaire comme ceci :

formName.controls['isMale'].value;

où formName est le nom de votre formGroup.

3 commentaires

réservoir vous pour la réponse, je supprime formControlName et n'utilise que ngmodel mais ne fonctionne pas. et supprimez ngModel et ajoutez this.postForm.controls ['isMale']. setValue (userProfile.isMale‌); et ne fonctionne pas et testez également this.postForm.controls ['isMale']. setValue (True ou false) et 'True' 'False' et ne fonctionne pas

Si vous n'utilisez que [(ngModel)], vous devez définir la propriété de nom, alors seulement cela fonctionnera.

enfin j'utilise this.postForm.controls ['isMale']. setValue (profile.isMale? 'tr‌ ue': 'false'); après avoir obtenu le modèle du serveur réglé manuellement, sélectionnez le mat et convertissez le booléen en chaîne, mais je pense que je peux lier le booléen au mat-select

0
votes

Enfin, j'utilise this.postForm.controls ['isMale']. setValue (profile.isMale? 'true': 'false'); après avoir obtenu le modèle du serveur réglé manuellement, sélectionnez le tapis et convertir un booléen en chaîne

0 commentaires

5
votes

Cela a fonctionné pour moi (j'utilise Angular 8)

   <mat-form-field>
    <mat-select [(ngModel)]="userProfile.isMale">
      <mat-option [value]="true">Men</mat-option>
      <mat-option [value]="false">Women</mat-option>
    </mat-select>
  </mat-form-field>

Notez que j'ai utilisé [value] = "true or false" sans aucun cotes. Evidemment, userProfile.isMale doit être booléen (vrai ou faux).

0 commentaires