我如何在角度实现动态复选框答案

【问题标题】：How do i implement dynamic checkbox in angular我如何在角度实现动态复选框
【发布时间】：2023-03-08 11:47:01
【问题描述】：

我正在尝试为我的 Angular 应用程序实现动态表单，我正在关注 https://angular.io/guide/dynamic-form

我有一个多于 4 个复选框选项的复选框问题。

到目前为止，我的复选框问题模型类似于只有一个 formControllerName ("fruits_key") 的下拉菜单

export class CheckBoxQuestion extends QuestionBase<string> {
  controlType = "checkbox";
  options: {key: string, value: string}[] = [];

  constructor(options: {} = {}) {
    super(options);
    this.options = options["options"] || [];
 }

我的对象是

new CheckBoxQuestion({
            key: "fruits_key",
            label: "Choose Fruits",
            options: [
              { key: "Apple", value: true },
              { key: "Orange", value: false },
              { key: "Grapes", value: false },
              { key: "Banana", value: false }
            ]
          })

这是我的 html 来显示复选框项目

<ng-container *ngSwitchCase="'checkbox'">
      <div class="d-flex">
        <div class="custom-control custom-checkbox" *ngFor="let opt of question['options']; index as idx">
          <input type="checkbox" class="custom-control-input" [formControlName]="question.key"
            [checked]="opt.value" ">
          <label class="custom-control-label">{{opt.key}}</label>
        </div>
      </div>
    </ng-container>

Q) 问题在于 [formControlName] 对所有复选框项目设置为相同。如何正确实现复选框项目，是否需要重写复选框模型？请告知您是否有更好的解决方案。

Angular 站点演示：https://angular.io/generated/live-examples/dynamic-form/stackblitz.html

【问题讨论】：

标签： angular angular6 angular-reactive-forms dynamic-forms

【解决方案1】：

我自己找到了解决方案。

<ng-container *ngSwitchCase="'checkbox'">
        <div class="d-flex">
          <div *ngFor="let option of question['options']; let i=index" [formArrayName]="question.key" class="custom-control custom-checkbox">
            <input type="checkbox" [formControlName]="i" id="{{question.key +'_'+ option.key}}" class="custom-control-input" (change)="getUpdate(question)"/>
            <label for="{{question.key +'_'+ option.key}}" class="custom-control-label">{{option.key}}</label>
          </div>
        </div>
 </ng-container>

我的问题控制服务将模型转换为表单组/表单控件/表单数组。

@Injectable()
export class QuestionControlService {
constructor() {}

toFormGroup(questions: QuestionBase<any>[]) {
let group: any = {};

questions.forEach(question => {
  if (question.controlType === "checkbox") {
    group[question.key] = this.buildCheckBoxArray(question["options"]);
  } else {
    group[question.key] = question.required
      ? new FormControl(question.value || "", Validators.required)
      : new FormControl(question.value || "");
  }
});
return new FormGroup(group);
}

buildCheckBoxArray(itemsArr): any {
 const arr = itemsArr.map(item => {
   return new FormControl(item.value);
 });
 return new FormArray(arr);
}
}

【讨论】：