Question

我是Angular 2的新手。我正在尝试根据https://angular.io/guide/dynamic-form扩展动态表单。我确实输入了无线电并按照我的需要工作。但现在我正在尝试复选框，但是存在问题。我有一组复选框，如果选中了一些复选框，我只得到布尔值。我需要值，检查复选框。有我的plunker：https://plnkr.co/edit/EhtpprYdXIFmYJG7Lzxg

感谢您的帮助！

Answer 1

我希望这将是您的解决方案。

templet.html

<form [formGroup] = "myForm" (ngSubmit) = "confirmFlights(myForm.value)">
  <ng-template ngFor [ngForOf]="flightList" let-flight let-i="index" >
     <input type="checkbox" [value]="flight.id" formControlName="flightid"
         (change)="flightids[i]=[$event.target.checked,$event.target.getAttribute('value')]" >
  </ng-template>
</form>

component.ts

flightids数组将有另一个这样的数组 [[true，＆＃39; id_1＆＃39;]，[false，＆＃39; id_2＆＃39;]，[true，＆＃39; id_3＆＃39;] ...] 这里true表示用户选中了它，false表示用户选中了然后取消选中它。用户从未检查过的项目不会插入到数组中。

flightids = []; 
confirmFlights(value){  
    //console.log(this.flightids);

    let confirmList = [];
    this.flightids.forEach(id => {
      if(id[0]) // here, true means that user checked the item 
        confirmList.push(this.flightList.find(x => x.id === id[1]));
    });
    //console.log(confirmList);

}

Answer 2

为什么它不起作用：

因为您正在使用一个formControl 键（question.key ===＆＃39;技能＆＃39;）所有3个复选框。

<span *ngSwitchCase="'checkbox'">
   <p *ngFor="let opt of question.options">
      <input [formControlName]="question.key"
         [id]="opt.key" type="checkbox" [value]="opt.key">
           <label>{{opt.value}}</label></p>
</span>

如何处理：

你应该为每个输入使用formControl键（复选框），以跟踪模型更改 - 这就是Angular表单的工作方式。

因此，如果您将分开分区分隔复选框，则可以使用：

dynamic-form-question.component.html 中的

将复选框更改为：

<span *ngSwitchCase="'checkbox'">
  <input [formControlName]="question.key"
    [id]="question.key" type="checkbox" [value]="question.value">
</span>

question.service.ts 中的

将复选框更改为：

new CheckboxQuestion({
    key: 'fast',
    label: 'Fast',
    value: false,
    order: 5
}),

这是改变了Plunker： https://plnkr.co/edit/2XIfMU?p=preview

Answer 3

复选框或收音机不会自动更新（此时我不确定这是由角度设计引起的还是由MDN: DOM input event引起）。

模板引用变量的使用有效但仅适用于FormGroup中的一个FormControl。

更优雅的解决方案：您可以直接从更改事件中设置FormControl的值（在FormGroup中）：

(change)="formGroup.controls[element.name].setValue($event.target.checked)"

由于FormControl。setValue＆＃39; emitEvent ， emitModelToViewChange 和 emitViewToModelChange 默认为true，似乎没有必要手动更新其他属性。

修改了角度dynamic form（working example on stackblitz）：

<input *ngSwitchCase="'checkbox'" [formControlName]="question.key"
        [id]="question.key" [type]="question.type" (change)="form.controls[question.key].setValue($event.target.checked)">

Dynamic Forms Angular 2 - 复选框

3 个答案: