Formular sendet keine Auswahl- und Kontrollkästchen-Eingaben in Angular 2

Question

Ich arbeite an einer kleinen Angular 2 To-do-App. Ich wollte keine Probleme mit der Browserkompatibilität mit den Eingabetypen wie Datum, DatumZeitlokal usw. haben, also habe ich <select> Eingaben gemacht, damit der Benutzer das Datum und die Uhrzeit eingeben kann. Alles funktioniert gut, Eingaben sind dynamisch, so kann der Benutzer nicht den Tag wählen, der nicht existiert (zB 02.02.2017), etc.

Das Problem ist, ich möchte Formulardaten an den Dienst senden und dann zum Back-End meiner App, aber wenn ich das Formular absende, sind die Werte von <select> Eingaben nicht im gesendeten Objekt enthalten, ebenso wie meine Checkbox-Eingabe. Ich verwende diese Art von Eingaben nicht oft, also tut es mir leid, wenn das eine noobish Frage ist, aber ich kann nicht herausfinden, was ich falsch mache. Hier

ist der Code:

<form #f="ngForm" (ngSubmit)="add(f.value)"> 

    <div *ngIf="error"> 
     <p>{{ error }}</p> 
    </div> 
    <div class="login-input-container"> 
     <input type="text" placeholder="title" name="title" ngModel autocomplete="off" required minlength="1" maxlength="100"> 
    </div> 
    <div class="login-input-container"> 
     <div class="datetime-container"> 
      <div> 
       <select #year name="year" (change)="showMonths(); selectedYear = year.value; yearDays(year.value);" required> 
        <option class="invisible" value="" disabled selected>year</option> 
        <option *ngFor="let year of years" [value]="year" placeholder="year">{{ year }}</option> 
       </select> 
       <select #month *ngIf="showedMonths" name="month" (change)="showDays(month.value, year.value); selectedMonth = month.value;" required> 
        <option class="invisible" value="" disabled selected>M</option> 
        <option *ngFor="let month of months" [value]="month">{{ month }}</option> 
       </select> 
       <select *ngIf="showedDays" name="day" (change)="showTime()" required> 
        <option class="invisible" value="" disabled selected>d</option> 
        <option *ngFor="let day of days" [value]="day">{{ day }}</option> 
       </select> 
      </div> 
      <div *ngIf="showedTime"> 
       <select name="hours" required> 
        <option class="invisible" value="" disabled selected>hh</option> 
        <option *ngFor="let hour of hours" [value]="hour">{{ hour }}</option> 
       </select> 
       : 
       <select name="minutes" required> 
        <option class="invisible" value="" disabled selected>mm</option> 
        <option *ngFor="let minute of minutes" [value]="minute">{{ minute }}</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <div class="login-input-container"> 
     <textarea id="todo-description" type="text" placeholder="description (optional)" name="description" ngModel autocomplete="off" minlength="1" maxlength="500"></textarea> 
    </div> 
    <div class="login-input-container"> 
     <span><p>should we notify you?</p><label for="notify-1"><input id="notify-1" type="checkbox" [checked]="todo.notify" value="1"><span></span></label></span> 
    </div> 
    <div class="login-input-container"> 
     <input type="submit" value="Submit" (click)="error = ''"> 
    </div> 

</form> 

Answer 1

Wenn Sie [value] verwenden oder [ngValue] benötigen Sie [(ngModel)] oder ngModel (ngModelChange)="showMonths()..." statt `(ändern) verwenden = "..."