Блог

Я пытаюсь реализовать динамические формы для своего приложения 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>
  

В) Проблема связана с [formControlName], для которого установлено одинаковое значение для всех элементов флажка. Как мне правильно реализовать элементы флажка, нужно ли переписывать модель флажка? Пожалуйста, сообщите, есть ли у вас лучшее решение.

Демонстрация сайта Angular:https://angular.io/generated/live-examples/dynamic-form/stackblitz.html

Я сам нашел решение.

 <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);
}
}