Angulaire 5 matériel: liste déroulante (select) exigences relatives à la validation ne fonctionne pas
J'ai un matériel déroulant à l'intérieur de mon ngForm, lorsque j'ai mis ce à choisir selon les besoins, il montre un astérisque ( * ) à côté d'elle, mais la forme est considérée comme valide si je ne sélectionnez pas l'option dans le menu déroulant.
<mat-form-field class="col-4 offset-1">
<mat-select placeholder="Some placeholder" [(value)]="data.name" required>
<mat-option *ngFor="let name of names" [value]="name.value">
name.viewValue
</mat-option>
</mat-select>
</mat-form-field>
C'est à la différence de ce qui se passe si je mets le matériel d'entrée requis, qui prendra la forme invalide si elle est vide.
<mat-form-field class="col-4 offset-1">
<input matInput name="dob" placeholder="Date Of Birth" [(ngModel)]="data.dob" required>
</mat-form-field>
Je préfère résoudre ce à l'aide d'un modèle de l'approche axée sur la pas en utilisant ReactiveForms ( j'ai trouvé une solution à parler de la ReactiveForms), quelqu'un peut-il m'aider?
Remarque:
J'ai trouvé un question du titre similaire, mais c'est à l'aide de FormGroup (reactiveForms)
J'ai mis un exemple pour donner une idée de ce stackblitz
Vous devez être connecté pour publier un commentaire.
Vous avez ajouté
required
de la sélection duoption
, pas laselect
. Faire comme:DÉMO
[(NgModel)]
.name
attribut est utilisé par Angulaire pour attribuer un formControl de sorte qu'il est obligatoire d'avoirBasé sur l'excellent réponse de (de zéro à héros), je tiens à préciser 2 points mentionnés dans les commentaires:
1 - Vous devez utiliser ngModel pas valeur
2 - Vous devez donner le contrôle d'un nom
Pleine de crédit va à lui, je tenais à préciser à tous les nouveaux arrivants comme moi, car il m'a fallu 2 heures pour trouver pourquoi ça ne fonctionne pas