表单未发送 select 和 Angular 中的复选框输入 2

Question

我正在开发一个小型 Angular 2 待办事项应用程序。我不希望浏览器与日期、日期时间-本地等输入类型的兼容性有任何问题，所以我确实为用户输入了 <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()..." 而不是 `(change)="..."

表单未发送 select 和 Angular 中的复选框输入 2

Form not sending out select and checkbox inputs in Angular 2

forms

angular2-forms

angular2-template

angular