如何管理 Angular 动态表单中的复选框？

Question

我在使用 Angular 4 使复选框以动态形式工作时遇到一些问题。

在 Firefox 上，选中复选框时，我得到的值是 'on' 代替 true。并且当取消选中它时，该值仍然存在并且没有设置为false 或''。

在 chrome 上，它甚至似乎都不起作用......

我创建了一个基于Angular dynamic form tutorial 的示例。

我添加了一个名为 question-checkbox.ts 的新文件来管理复选框：

import { QuestionBase } from './question-base';

export class CheckboxQuestion extends QuestionBase<boolean> {
  controlType = 'checkbox';
  type: string;

  constructor(options: {} = {}) {
    super(options);
    this.type = 'checkbox';
  }
}

然后，我更新了dynamic-form-question.component.html 以使用这种新类型：

<div [formGroup]="form">
  <label [attr.for]="question.key">{{question.label}}</label>
  <div [ngSwitch]="question.controlType">
    <select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key">
      <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
    </select>
    <input *ngSwitchDefault [formControlName]="question.key" [id]="question.key" [type]="question.type" />
  </div>
  <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
</div>

而且，我已经更新了question.service.ts 中的数据集：

import { Injectable }       from '@angular/core';
import { DropdownQuestion } from './question-dropdown';
import { QuestionBase }     from './question-base';
import { TextboxQuestion }  from './question-textbox';
import { CheckboxQuestion }  from './question-checkbox';

@Injectable()
export class QuestionService {

  getQuestions() {

    let questions: QuestionBase<any>[] = [

      new DropdownQuestion({
        key: 'brave',
        label: 'Bravery Rating',
        options: [
          { key: 'solid', value: 'Solid' },
          { key: 'great', value: 'Great' },
          { key: 'good', value: 'Good' },
          { key: 'unproven', value: 'Unproven' }
        ],
        order: 3
      }),

      new TextboxQuestion({
        key: 'firstName',
        label: 'First name',
        value: 'Bombasto',
        required: true,
        order: 1
      }),

      new TextboxQuestion({
        key: 'emailAddress',
        label: 'Email',
        type: 'email',
        order: 2
      }),

      new CheckboxQuestion({
        key: 'sideksick',
        label: 'Sidekick',
        order: 3
      })
    ];

    return questions.sort((a, b) => a.order - b.order);
  }
}

最后，我更新了dynamic-form.component.html 以显示表单的当前状态：

<div>
  <form [formGroup]="form">
    <div *ngFor="let question of questions" class="form-row">
      <df-question [question]="question" [form]="form"></df-question>
    </div>
  </form>
  <p><strong>Current state</strong><br>{{form.value | json}}</p>
</div>

Example available on Plunker

所以我的问题是：我应该怎么做才能在 Angular 4 动态表单中使用复选框，并能够获得正确的值？

至于为什么我需要使用动态表单，那是因为我是基于来自描述它的外部服务的 JSON 生成我的表单。

Answer 1

新答案

似乎有一个非常奇怪的行为导致 Angular 4.x 出现这个问题。

这样写不行：

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

但是写这个确实有效：

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

唯一的区别是我们不使用 Angular 模板功能（[type]="question.type"、[attr.type]="question.type" 或 type={{question.type}}）来编写 type 的内容，所以我们只使用 HTML 中的原生 type .
这对我来说似乎是一个错误......

这里是fix on Plunker。

---

旧答案

上述解决方案是您唯一应该考虑的解决方案。

我从angular2-dynamic-form-checkbox的回答中找到了提示。

我在文件dynamic-form-question.component.html 中缺少以下部分：[(ngModel)]="question.value" (change)="question.value = ckb.checked" #ckb。

<select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key">
  <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
</select>
<input *ngSwitchCase="'checkbox'" [formControlName]="question.key" [id]="question.key" [type]="question.type" [(ngModel)]="question.value" (change)="question.value = ckb.checked" #ckb />
<input *ngSwitchDefault [formControlName]="question.key" [id]="question.key" [type]="question.type" />

似乎在动态表单的情况下，复选框不会自动管理，因此我们需要根据复选框的checked 状态更新它们在change 上的值。

这里是fix on Plunker。