動態添加表單域後的Angular2日誌值

我正在嘗試控制檯日誌選項數組中的每個對象的值。我目前能夠在選擇數組中記錄對象，但所有的值都是空的。我看到每個對象都有timeZonePicker: "", startTimeInput: "", endTimeInput: ""。我能夠添加和從選擇數組中刪除並記錄密鑰，但我無法記錄該值。我嘗試了很多不同的東西，但仍然不成功。動態添加表單域後的Angular2日誌值

<div class="container"> 
    <div class="row"> 
     <div class="col-md-9"> 
      <div *ngFor="let choice of choices; trackBy=customTrackBy" class="form-inline"> 
       <select [ngModel]="choice.timeZonePicker" class="form-control" id="timeZonePicker"> 
        <option *ngFor="let timeZone of timeZones" [selected]="timeZone.chosenTimeZone == '(GMT) Western Europe Time, London, Lisbon, Casablanca, Greenwich'">{{ timeZone.chosenTimeZone }}</option> 
       </select> 
        <input [ngModel]="choice.startTimeInput" type="time" class="form-control" id="startTimeInput"> 
        <input [ngModel]="choice.endTimeInput" type="time" class="form-control" id="endTimeInput"> 
      </div> <!-- end form field div --> 
      <div class="container"> 
       <button (click)="onSubmit()" class="btn btn-primary">Submit</button> 
      </div> 
      <div class="container"> 
       <button class="pull-left btn btn-success" (click)="addNewChoice()">Add Field</button> 
       <button class="pull-left btn btn-danger" (click)="removeChoice()">Remove Field</button> 
      </div> 
     </div> <!-- end col-md-9 --> 
    </div> <!-- end row --> 
</div> <!-- end container -->

下面是組件。

export class TimeZonesComponent { 
constructor(){} 

timeZones = [ 
     { val: -12, chosenTimeZone: '(GMT -12:00) Eniwetok, Kwajalein'}, 
     { val: -11, chosenTimeZone: '(GMT -11:00) Midway Island, Samoa'},....]; 

choices = [ 
    { 
    timeZonePicker: '', 
    startTimeInput: '', 
    endTimeInput: '' 
    }, 
    {   
    timeZonePicker: '', 
    startTimeInput: '', 
    endTimeInput: '' 
    }]; 

addNewChoice(){ 
    var dataObj = {   
     timeZonePicker: '', 
     startTimeInput: '', 
     endTimeInput: '' 
    }; 
    this.choices.push(dataObj); 
} 

removeChoice(){ 
    var lastItem = this.choices.length - 1; 
    this.choices.splice(lastItem); 
    console.log(this.choices); 
} 

onSubmit(){ 
    console.log(this.choices); 
} 

customTrackBy(index: number, obj: any){ 
    return index; 
} 
}

我真的很感激任何幫助。

來源

2016-06-19 joaoSaulo

我發現了我的錯誤。我需要使用trackBy（我最初並沒有）和[（ngModel））。我只用一種方式綁定，但我需要兩種方式。如果有人希望看到學習的代碼，只是評論，我會高興地分享它。

來源

2016-06-21 04:35:57 joaoSaulo

動態添加表單域後的Angular2日誌值

回答

相關問題