Как реализовать динамический флажок в угловых - PullRequest
Новая
       21

Как реализовать динамический флажок в угловых

0 голосов
/ 24 апреля 2019

Я пытаюсь реализовать динамические формы для моего углового приложения, и я следую за 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 Site Demo: https://angular.io/generated/live-examples/dynamic-form/stackblitz.html

1 Ответ

0 голосов
/ 26 апреля 2019

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

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