Angularjs 2 Driven Forms - Элементы ввода массива

Question

Я боролся в течение 1 и половины дня и до сих пор не смог найти решение проблемы. Я работаю над простой формой, которая имеет select и checkboxes element.When я пытаюсь представить форму, я не получаю значения select и checkboxes, но я просто вернусь в консоли. Я работаю над формой, управляемой шаблонами.

<form (ngSubmit)="addSubcontractor(subcontractorForm)" #subcontractorForm="ngForm"> 
     <h5>Type :</h5> 
     <div class="form-group"> 
      <div *ngFor="let contractor_type of contractor_types;let i = index;" class="pull-left margin-right"> 
      <label htmlFor="{{ contractor_type | lowercase }}"> 
          {{ contractor_type }} : 
      </label> 
      <input type="checkbox" name="_contractor_type[{{i}}]" [value]="contractor_type" ngModel> 
     </div> 
    <div class="form-group"> 
     <select class="form-control costcodelist" name="_cc_id[]" multiple="true" ngModel> 
     //When I put ngModel on select I just keep getting error 
     //TypeError: values.map is not a function 
      <option *ngFor="let costcode of costcodes" [selected]="costcode.id == -1" [value]="costcode.id">{{ costcode.costcode_description }}</option> 
     </select> 
    </div> 
    </form> 

Компонент Раздел

export class SubcontractorComponent implements OnInit, OnDestroy { 
    private contractor_types = ['Subcontractor', 'Supplier', 'Bank', 'Utility']; 
    constructor(private costcodeService: CostcodeService, 
       private subcontractorService: SubcontractorService) { 

    this.subcontractorService.initializeServices(); 
    } 
    ngOnInit() { 

     this.costcode_subscription = this.costcodeService.getAll() 
            .subscribe(
            (costcodes) => { 
             this.costcodes = costcodes; 
            }); 

    } 
    addSubcontractor(form: NgForm) { 
    console.log(form.value); 
    } 
} 

Когда я удалить ngModel из select элемента код прекрасно работает и когда я отправить форму, я получаю следующий результат.

_contractor_type[0]:true 
_contractor_type[1]:true 
_contractor_type[2]:true 
_contractor_type[3]:"" 

Я не получаю значения флажков, а также выбранные параметры из выбранного элемента.

Ваши комментарии и ответы будут очень благодарны.

Благодаря

Answer 1

Вот простой выбор, который я использую с моей помощью шаблонов формы.

<form #f="ngForm" (submit)="addOperator(f.valid)" novalidate> 
     <label>Name</label> 

     <input [(ngModel)]="operator.name" name="name"> 
     <label >Service</label> 
     <select #service="ngModel" name="service" [(ngModel)]="operator.service"> 
      <option *ngFor='let service of services' [ngValue]='service'>{{service.name}}</option> 
     </select> 

     <label >Enabled</label> 
     <label> 
      <input type="checkbox" name="enabled" [(ngModel)]="operator.enabled"> 
     </label> 

     <button type="submit">Create Operator</button> 
    </form> 

.ts

operator: Operator; 

ngOnInit() { 
    this.operator = <Operator>{}; // // Initialize empty object, type assertion, with this we loose type safety 
} 

addOperator(isValid: boolean) { 
    if (isValid) { 
     this.operatorsService.addOperator(this.operator).then(operator => { 
      this.goBack(); 
     }); 
    } 
} 

Также им импортировать этот

import { FormsModule, ReactiveFormsModule } from '@angular/forms';