Winkel-5 material: dropdown (select) erforderlich Validierung nicht funktioniert

Ich habe ein dropdown-material in meinem ngForm, wenn ich diese wählen Sie wie erforderlich es zeigt ein Sternchen * neben der es aber die form ist gesehen als gültig an, wenn ich nicht wählen Sie eine option aus der dropdown-Liste.

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

Dies ist im Gegensatz zu, was passiert, wenn ich den material-input benötigt, die die form ungültig, wenn Sie leer ist.

<mat-form-field class="col-4 offset-1">
 <input matInput name="dob" placeholder="Date Of Birth" [(ngModel)]="data.dob" required>
  </mat-form-field>

Ich bevorzuge, um dieses Problem zu lösen mit einem template-driven-Ansatz nicht durch die Verwendung ReactiveForms ( ich fand die Lösung reden, die ReactiveForms), kann mir jemand helfen?

Hinweis:

Fand ich eine Frage ähnliche Titel, sondern es wird mit FormGroup (reactiveForms)

Habe ich ein Beispiel zu geben, eine Idee in diesem stackblitz

InformationsquelleAutor Ahmed Elkoussy | 2018-04-29

  1. 5

    Sie Hinzugefügt required um die wählen Sie die option, nicht die select. Machen Sie es wie:

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

    DEMO

    sorry bro, ich versehentlich Tat dies zunächst in der stackblitz aber aktualisiert es nur, nachdem Sie die Frage , an beiden stellen, es funktioniert nicht leider
    Haben Sie überprüft, mein link? Da Formular wird ungültig, wenn nicht gewählt wird mat-wählen Sie
    Ja, ich sehe es bei Euch geklappt hat, lasst mich versuchen es in meinem code-update erscheint in Kürze (seltsam ich fast den gleichen code wie du, außer der name attr vielleicht ?)
    Ja und [(NgModel)]. name Attribut wird von Winkel zu zuweisen eines formControl so ist es zwingend erforderlich, um
    Np, bin froh, dass es funktionierte!

    InformationsquelleAutor Julius Dzidzevičius

  2. 3

    Basierend auf der hervorragenden Antwort von (from zero to hero), ich möchte klarstellen, 2 Punkte Kommentare:

    1 - verwenden Sie ngModel nicht Wert

    2 - Sie haben zu geben, die Kontrolle einen Namen

    Vollen Kredit geht zu ihm, ich wollte dies klären zu jeder Neuling wie mich, als es mich brauchte 2 Stunden, um herauszufinden, warum es nicht funktioniert

    Beide ngModel und mit dem Wert arbeiten sollten nach Material-Dokumentation.
    Möchten Sie auch eine 3-Punkt - überprüfen Sie die ngModel Wert, In meinem Fall, wird der Default-Wert 0 war und es waren nicht die einzigen Optionen in der Liste mit den 0-Wert der option und das ist, warum die form mit den grünen

    InformationsquelleAutor Ahmed Elkoussy

Schreibe einen Kommentar