Wie bedingt erfordern, bilden Eingänge in der Winkel 4?

Ich bin mit Vorlagen-Formulare für das hinzufügen der Aufgabe, und es gibt 2 input-Felder des Typs Zahl für geschätzte Minuten, um die vollständige Aufgabe,

  • ein Feld für die geschätzte Anzahl von Stunden und
  • anderen ist für geschätzte Minuten, um die Aufgabe abzuschließen

da die Aufgabe Schätzung kann entweder in Stunden wie 1hrs , oder in Stunden und Minuten wie 1Hrs 30Mins , möchte ich das set-Attribut erforderlich auf Eingaben bedingt. Also einer der 2 Eingänge festgelegt werden muss, oder das Formular-Validierung Fehler auftreten, wenn beide Eingänge sind leer beim Absenden.

bisher habe ich dies getan, aber die Validierung funktioniert nicht 

<form class="add-task" (ngSubmit)="onSubmit(newtask)" #newtask="ngForm">  
    <div class="estimate-container">
        <input 
            type="number" 
            min="0" 
            max="10" 
            id="estimate_hrs" 
            ngModel 
            name="estimate_hrs"
            mdInput 
            [required]="!estimateMins.valid" 
            placeholder="Estimated Hours" 
            #estimateHrs="ngModel"
        >
        <div class="error-msg" *ngIf="!estimateHrs.valid && !estimateMins.valid">
            Please enter estimated hours 
        </div>
        <input 
            type="number" 
            min="0" 
            max="60" 
            id="estimate_min" 
            ngModel 
            name="estimate_min" 
            mdInput 
            [required]="!estimateHrs.valid" 
            placeholder="Estimated Minutes" 
            #estimateMins="ngModel"
        >
        <div class="error-msg" *ngIf="!estimateMins.valid && !estimateHrs.valid">
            Please enter estimated minutes
        </div>   
    </div>
    <button type='submit' [disabled]="!newtask.valid" >Submit</button>
</form>
InformationsquelleAutor R.K | 2017-08-04
  1. 7

    Versuchen mit Hilfe von [attr.erforderlich] statt.

       <input 
        type="number" 
        min="0" 
        max="10" 
        id="estimate_hrs" 
        ngModel 
        name="estimate_hrs"
        mdInput 
        [attr.required]="!estimateMins.valid" 
        placeholder="Estimated Hours" 
        #estimateHrs="ngModel"
    >
    • könnte man sich in dieser link
    • Der OP sagte, dass war nicht arbeiten, daher dachte ich, dass Sie könnten versuchen, die Alternative syntax ..,
    • hat gingen Sie durch den link?, es war eine Frage. Ist dort Weise, es zu lösen in der Vorlage-driven Formen?
    • vielen Dank für Ihre Zeit, diese zu beantworten , aber es hat nicht funktioniert , also ist meine einzige Möglichkeit ist die Umsetzung der reaktiven Formen ?.
    • Haben Sie versucht, die Vereinfachung der code, um die Grundlagen, nur um sicher zu sein, dass ist das problem? Versuchen Sie nehmen Sie alle anderen Attribute und sehen, ob das etwas ändert. Auch könnten Sie eine plunker, das veranschaulicht das Problem?
    • Ich habe gerade ein plunker hier und die grundlegende syntax scheint zu funktionieren: plnkr.co/Bearbeiten/QAqeBYrg19dXcqbubVZ8?p=Album Vorhören Also ich denke dein problem vielleicht woanders (nicht das required-Attribut) ODER das, was Sie verbindlich sind.

    InformationsquelleAutor DeborahK
  2. 5

    Sie benötigen, um Ihre !estimateMins.valid im Einzelzimmer Zitate wie:

    [required]="'!estimateMins.valid'" und [required]="'!estimateHrs.valid'"

    Sehen diese plunkr

    InformationsquelleAutor penleychan
  3. 5

    Dies ist meine funktionierende Lösung für die Winkel-5:

    In-Komponente:

    @Input()
required: boolean;

    In der Vorlage auf den Eingang (oder wählen Sie) element:

    [required]="required"

    Auf dem Selektor:

    [required]="true"

    Wie @DeborahK doppelt geprüft, keine Notwendigkeit für einfache Anführungszeichen 🙂

    • durch das hinzufügen von einfachen Anführungszeichen klappt es bei mir sonst nicht funktioniert
    InformationsquelleAutor Pim Hazebroek
  4. 3

    Verbrachte ich einige Zeit versucht dies, weil die grundlegende syntax sollte gearbeitet haben. Ursprünglich habe ich habe einfach plunker nur zum testen der syntax und die syntax funktioniert in der Tat als definiert werden.

    Nach der Erweiterung des plunker, um mehr eng mit dem OP-code: https://plnkr.co/edit/QAqeBYrg19dXcqbubVZ8?p=preview

    <Links to plunker must be accompanied by code>

    Es wurde deutlich, dass es nicht ein syntax-Fehler. Es ist eher ein Logik-Fehler.

    Wenn das Formular zuerst angezeigt wird, beide controls gültig sind, damit weder das eine noch das required-Attribut. So ist dann weder erforderlich sind, und es scheint, dass es nicht funktioniert.

    Gibt es mehrere mögliche Wege diese zu lösen. Man, ist das erstellen eines benutzerdefinierten validator-das macht die cross-field validation.

    • vielen Dank für Ihre Zeit , später habe ich es geändert reaktive form und machte array mit benutzerdefinierten Validatoren für verschiedene Szenarien , wie auch für die Kontrolle der min / max-Wert des Formular-Steuerelemente und Anzeige von Fehlern nach, dass
    InformationsquelleAutor DeborahK
Schreibe einen Kommentar