Не получить значения нескольких флажков в угловых реактивных формах

Question

Я создаю формы Angular Reactive, и я добавил туда несколько флажков.Я хочу получить выбранные пользователем значения в массив.Форма генерируется из данных JSON.Когда пользователь нажимает флажок, он добавляется в массив.Когда пользователь нажимает другой флажок, он показывает только самый последний, а предыдущее выбранное значение отсутствует.Это то, что я пытался.

https://stackblitz.com/edit/github-ejwhnx (Вы можете проверить консоль stackblitz на выбранное значение)

Благодарю, если кто-нибудь может оказать поддержку для решения этой проблемы.

Answer 1

Coderaizer.Вы должны иметь четкое представление о том, что вы хотите получить.позвольте мне показать пример:

Представьте, что вы хотите получить что-то подобное (помните, что это пример: вы решили, что вы хотите получить)

data=[
{id:1004,answer:[100401,100402]},
{id:1005,answer:[100503]},
{id:1006,answer:[100603,100606]}
]

другой пример можно получить только[100401,100402,100503,100603,100606] или даже строка "100401,100402,100503,100606,100606"

Ну, на самом деле все не так просто.Когда у нас есть «checkBox», флажок имеет только два возможных значения: true или false, поэтому наш объект становится примерно таким:

data=[
{id:1004,answer:[true,true]},
{id:1005,answer:[false,false,true]},
{id:1006,answer:[false,false,true,false,false,true]}
]

, обсуждение которого вы можете увидеть в этой ссылке (в конце есть настраиваемый FormControl для управления списком флажков)

Имея в виду тот же пример, в свой компонент вставьте formBuilder в конструктор

constructor(private fb:FormBuilder){}

и создайтеФорма в ngOnInit ().Сначала с данными - на данный момент забудьте о json -

  ngOnInit() {
    this.myForm = new FormArray([
      this.fb.group({
        id: 1004,
        answers: new FormArray([new FormControl(true), new FormControl(true)])
      }),
      this.fb.group({
        id: 1005,
        answers: new FormArray([new FormControl(false),new FormControl(false),new FormControl(true)])
      }),
    ])
  }

И наш .html похож на

  <div *ngFor="let question of myForm.controls" >
    <div [formGroup]="question">
      <input formControlName="id">
      <div formArrayName="answers">
        <div *ngFor="let item of question.get('answers').controls;let i=index">
            <input type="checkbox" [formControlName]="i">
        </div>
      </div>
    </div>
  </div>
{{myForm?.value|json}}

Теперь пришло время подумать в нашем .json.Посмотрите, что наш .json хочет создать форму и показать параметры в нашей форме

  ngOnInit() {
    let group:FormGroup[]=[]
    this.JSON.forEach(x=>{
       group.push(this.fb.group({
         id:x.id,
         answers:new FormArray(x.answers.map(x=>new FormControl(false)))
       }))
    })
    this.myForm = new FormArray(group)
  }

И "украсить" наш .html, чтобы показать параметры

  <div *ngFor="let question of myForm.controls;let j=index" >
    {{JSON[j].question}}
    <div [formGroup]="question">
      <input formControlName="id">
      <div formArrayName="answers">
        <div *ngFor="let item of question.get('answers').controls;let i=index">
            <input type="checkbox" [formControlName]="i">{{JSON[j].answers[i].answer}}
        </div>
      </div>
    </div>
  </div>

Ну, выесть компонент для отображения формы, попробуйте посмотреть "что есть что" для настройки @Inputs ()