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

InformationsquelleAutor Ahmed Elkoussy | 2018-04-29
  1. 5

    Vous avez ajouté required de la sélection du option, pas la select. Faire comme:

    <mat-select placeholder="Favorite food" name="select" [(ngModel)]="select" required>
    <mat-option *ngFor="let food of foods" [value]="food.value" >
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

    DÉMO

    • désolé bro, je l'ai fait par erreur cela d'abord dans le stackblitz mais mis à jour juste après avoir posé la question , dans les deux endroits, il ne fonctionne pas malheureusement
    • Avez-vous vérifié mon lien? Il y a le formulaire est invalide si elle n'est pas sélectionnée dans le tapis-sélectionnez
    • Oui, je vois qu'il a travaillé avec vous, permettez-moi de l'essayer dans mon code , sera mise à jour sous peu (étrangement j'ai presque le même code comme vous, sauf le nom de l'attribut peut-être ?)
    • Oui et [(NgModel)]. name attribut est utilisé par Angulaire pour attribuer un formControl de sorte qu'il est obligatoire d'avoir
    • C'est exactement ce que je n'ai pas eu , c'est maintenant au travail !! merci s'accoupler ! J'apprécie vraiment votre aide
    • Np, content que ça a fonctionné!
    • La réponse ci-dessus fonctionne correctement sur la validation obligatoire. Mais quand je soumettre des informations avec la validité des informations, il peut ne pas fonctionner comme il n'y a pas d'attribut de lier id sélectionnées. Code id de l'élément sélectionné est lier à ng modèle.<select name="type" nécessaire [(ngModel)]='selectedelement.id " > <option *ngFor="laissez-obj éléments" [valeur]="obj.id"> {{obj.description}} </option> </select> \n Mais si j'ai changé pour une solution ci-dessus, il se présente comme suit, <select name="type" nécessaire [(ngModel)]='type'> <option *ngFor="laissez-obj éléments" [valeur]="obj.id"> {{obj.description}} </option> </select>

    InformationsquelleAutor Julius Dzidzevičius
  2. 4

    Basé 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

    • Les deux ngModel et de la valeur travail selon le Matériau de la documentation.
    • Souhaitez ajouter un 3ème point - vérifier la ngModel valeur, Dans mon cas, la valeur par Défaut est 0 et il n'étaient pas les seules options de la liste ayant la 0 la valeur d'option et c'est pourquoi la forme montrant vert
    InformationsquelleAutor Ahmed Elkoussy