Die Validierung für das Feld auswählen-Winkel-2

Ich bin mit [email protected] release. Wie würde ich eine validation auf wählen Sie field?

<div class="form-group" [class.has-error] = "schoolError">
            <label class="control-label" for="lang">Select School</label>
            <select class="form-control" name="school"  
            required #school
            [(ngModel)] = "model.school">
                <option value="default">Select a school</option>
                <option *ngFor= "let sch of school">{{sch}}</option>
            </select>
        </div>   

 <button class="btn btn-primary" 
     [disabled] = "form.invalid" type="submit">Submit</button>

Grundsätzlich möchte ich deaktivieren Sie die-Taste, wenn die select field ungültig ist? Wie mache ich das select-Feld invalid wenn kein Wert ausgewählt ist?

Wenn ist, es soll ungültig sein? Wenn model.school enthält einen Wert, der zugewiesen wird, um die <select>. Ist er dann immer noch ungültig, auch wenn es schon einen Wert hat, und Sie haben nur ein required validator? Oder hat model.school nicht enthält einen ersten Wert?

InformationsquelleAutor Shane | 2017-02-09

  1. 4

    Können Sie eine Boolesche variable und weisen Sie false als default-Wert. Wenn der Benutzer wählt eine option aus, wird es wiederum wahr.

    https://plnkr.co/edit/yR5xz4h3llkxHsUQxFJB?p=preview

    <div>
  <select [(ngModel)]='selected'>
    <option value='one'>Three</option>
    <option value='two'>Two</option>
  </select>
  <button [disabled]='!selected && form.status == 'VALID'>click</button>
</div>

    selected:boolean = false;

    Anwendung auszuwählen, [disabled]='!ausgewählte " aber ich will es auch anwenden, wenn das Formular ungültig ist...
    Bearbeitet meine post.
    warum nicht wählen Sie Feld muss dieser Zustand, wo als input-Feld, dessen Typ und der text nicht?
    Dies ist nur ein Weg, es zu tun mein Freund 🙂 ich Wette, es gibt mehr Möglichkeiten, es zu erreichen.

    InformationsquelleAutor kind user

  2. 3

    Versuchen, und ändern Sie den Wert in Ihrem Standard-option auf einen leeren string:

    <option [value]="">Select a school</option>
    Funktioniert das nicht, da der submit ausgelöst wird, sowieso.

    InformationsquelleAutor josh_in_dc

  3. 2

    Ich Laufe in die gleiche Art von situation und die unten snippet scheint zu funktionieren ziemlich gut.

    <option [ngValue]="undefined">Select a school</option>

    InformationsquelleAutor Nehmia

  4. 1

    Beim hinzufügen ngForm Ihrem Namen für Ihr Formular Ihre Validierung sollte funktionieren. Ich gehe davon aus, dass die fehlen, weil sonst die Formular-Validierung funktionieren würde, wie Sie ist. Also das einzige was Sie brauchen ist, um hinzufügen, um Ihre formtag ist die oben genannte ngForm:

    <form #form="ngForm">

    Hier ein plunker

    [(ngModel)] = "model.school" umfasst ngModel. Ich sehe nicht, wie das hinzufügen ngModel wieder haben sollte, keine Wirkung.
    Scheint Ihre Antwort war nicht vorgesehen [(ngModel)] = "model.school" wie in Ihrem plunker - auch den text in Ihrer Antwort deutet darauf hin, dass.
    Du hast Recht. Danke für den Hinweis! meine Antwort war alles Durcheinander, muss verloren haben, meine Gedanken entlang der Linie.... Demenz ist die Einstellung 😀
    Zu viel Programmierung bekannt ist, führen zu temporären Demenz manchmal 😉
    Ihre Plunker enthält [(ngModel)] = "sch" aber sch ist nur als iteration variable, die mit *ngFor. Das ist ungültig. Ein übergeordnetes element kann nicht finden die *ngFor variable of a Kind-Kontext.

    InformationsquelleAutor AJT_82

  5. 1

    Ich glaube, Sie sollten in der Lage sein zu implementieren [disabled]="checkSelectFunction()" auf Ihre Schaltfläche, und erstellen Sie dann eine Funktion zu überprüfen, wenn kein Wert ausgewählt ist wählen Sie Feld.

    InformationsquelleAutor Richard Ansell

  6. 0

    Ich bin ein wenig spät hier, aber die eine Sache, die für mich gearbeitet wurde die Einstellung der Eigenschaften auf null in der Komponente.

    Beispielsweise

    HTML:

    <div class="form-group">
  <label for="type">Type</label>
  <select
    class="form-control"
    id="type"
    name="type"
    [(ngModel)]="appointment.typeId"
    required>
    <option *ngFor="let aType of types"
        [value]="aType.appointmentTypeId">
        {{aType.type}}
  </select>

    Komponente:

    appointment : Appointment = new Appointment(null);

    Wo Modell:

    export class Appointment {
  constructor(
    public typeId: number
  ) {}
}

    Ich hoffe, das hilft jemandem wie mir, der ist neu Eckig

    InformationsquelleAutor Harinder

Schreibe einen Kommentar