表單不發送在Angular 2中的選擇和複選框輸入

Question

我正在開發一個小型的Angular 2 To-do應用程序。我不希望瀏覽器與日期，日期時間本地等輸入類型的兼容性有任何問題，所以我確實爲用戶輸入了<select>輸入以輸入日期和時間。一切工作正常，輸入是動態的，所以用戶不能選擇不存在的一天（如02/29/2017）等。

問題是，我想發送表單的數據到服務，然後到我的應用程序的後端，但是當我提交表單時，來自<select>輸入的值不包含在發送的對象中，以及我的複選框輸入中。我不經常使用這些類型的輸入，所以我很抱歉，如果這是一個不好的問題，但我無法弄清楚我做錯了什麼。

下面是代碼：

<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

如果使用[value]或[ngValue]你需要使用[(ngModel)]或ngModel (ngModelChange)="showMonths()..."，而不是`（其他城市）= 「...」