Angular ReactiveForms: создание массива значений флажков?

Учитывая список флажков, привязанных к одному и тому же formControlName, как я могу создать массив значений флажков, привязанных к formControl, а не просто true/ false?

Пример:

<form [formGroup]="checkboxGroup">
    <input type="checkbox" id="checkbox-1" value="value-1" formControlName="myValues" />
    <input type="checkbox" id="checkbox-2" value="value-2" formControlName="myValues" />
    <input type="checkbox" id="checkbox-3" value="value-2" formControlName="myValues" />
</form>

checkboxGroup.controls['myValues'].value в настоящее время производит:

true or false

Что я хочу, чтобы это произвело:

['value-1', 'value-2', ...]

С помощью ответа сайленсода я написал решение для получения значений вместо состояний в моем formBuilder.

Я использую метод для добавления или удаления значений в formArray. Это может быть плохой подход, но он работает!

component.html

<div *ngFor="let choice of checks; let i=index" class="col-md-2">
  <label>
    <input type="checkbox" [value]="choice.value" (change)="onCheckChange($event)">
    {{choice.description}}
  </label>
</div>

component.ts

// For example, an array of choices
public checks: Array<ChoiceClass> = [
  {description: 'descr1', value: 'value1'},
  {description: "descr2", value: 'value2'},
  {description: "descr3", value: 'value3'}
];

initModelForm(): FormGroup{
  return this._fb.group({
    otherControls: [''],
    // The formArray, empty 
    myChoices: new FormArray([]),
  }
}

onCheckChange(event) {
  const formArray: FormArray = this.myForm.get('myChoices') as FormArray;

  /* Selected */
  if(event.target.checked){
    // Add a new control in the arrayForm
    formArray.push(new FormControl(event.target.value));
  }
  /* unselected */
  else{
    // find the unselected element
    let i: number = 0;

    formArray.controls.forEach((ctrl: FormControl) => {
      if(ctrl.value == event.target.value) {
        // Remove the unselected element from the arrayForm
        formArray.removeAt(i);
        return;
      }

      i++;
    });
  }
}

Когда я отправляю свою форму, например, моя модель выглядит так:

  otherControls : "foo",
  myChoices : ['value1', 'value2']

Не хватает только одного: функции для заполнения formArray, если ваша модель уже проверила значения.

Вот хорошее место для использования FormArray https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html

Для начала мы создадим наш массив элементов управления либо с помощью, либо с FormBuilderпомощьюFormArray

FormBuilder

this.checkboxGroup = _fb.group({
  myValues: _fb.array([true, false, true])
});

новый FormArray

let checkboxArray = new FormArray([
  new FormControl(true),
  new FormControl(false),
  new FormControl(true)]);

this.checkboxGroup = _fb.group({
  myValues: checkboxArray
});

Достаточно просто сделать, но затем мы собираемся изменить наш шаблон и позволить шаблонному движку обрабатывать то, как мы привязываемся к нашим элементам управления:

template.html

<form [formGroup]="checkboxGroup">
    <input *ngFor="let control of checkboxGroup.controls['myValues'].controls"
    type="checkbox" id="checkbox-1" value="value-1" [formControl]="control" />     
  </form>

Здесь мы повторяем наш набор FormControlsв нашем myValues FormArrayи для каждого элемента управления, который мы привязываем [formControl]к этому элементу управления, а не к элементу FormArrayуправления, и <div>{{checkboxGroup.controls['myValues'].value}}</div>производимtrue,false,true а также делаем синтаксис вашего шаблона немного менее ручным.

Вы можете использовать этот пример: http://plnkr.co/edit/a9OdMAq2YIwQFo7gixbj?p=preview, чтобы ковыряться

В Angular 6 это сделать значительно проще, чем в предыдущих версиях, даже когда информация о флажке заполняется асинхронно из API.

Первое, что нужно понять, это то, что благодаря каналу Angular 6 keyvalueнам больше не нужно использовать FormArray, и вместо этого мы можем вложитьFormGroup .

Сначала передайте FormBuilder в конструктор

constructor(
    private _formBuilder: FormBuilder,
) { }

Затем инициализируйте нашу форму.

ngOnInit() {

    this.form = this._formBuilder.group({
        'checkboxes': this._formBuilder.group({}),
    });

}

Когда данные наших флажков доступны, повторите их, и мы можем вставить их прямо во вложенные FormGroupкак именованные FormControl, без необходимости полагаться на массивы поиска с индексированными числами.

const checkboxes = <FormGroup>this.form.get('checkboxes');
options.forEach((option: any) => {
    checkboxes.addControl(option.title, new FormControl(true));
});

Наконец, в шаблоне нам просто нужно перебрать keyvalueфлажки: никаких дополнительных let index = i, и флажки автоматически будут в алфавитном порядке: намного чище.

<form [formGroup]="form">

    <h3>Options</h3>

    <div formGroupName="checkboxes">

        <ul>
            <li *ngFor="let item of form.get('checkboxes').value | keyvalue">
                <label>
                    <input type="checkbox" [formControlName]="item.key" [value]="item.value" /> {{ item.key }}
                </label>
            </li>
        </ul>

    </div>

</form>

Если вы ищете значения флажков в формате JSON

{ "name": "", "countries": [ { "US": true }, { "Germany": true }, { "France": true } ] }

Полный пример здесь .

Прошу прощения за использование названий стран в качестве значений флажков вместо указанных в вопросе. Дальнейшее объяснение -

Создайте FormGroup для формы

 createForm() {

    //Form Group for a Hero Form
    this.heroForm = this.fb.group({
      name: '',
      countries: this.fb.array([])
    });

    let countries=['US','Germany','France'];

    this.setCountries(countries);}
 }

Пусть каждый флажок будет FormGroup, созданной из объекта, единственным свойством которого является значение флажка.

 setCountries(countries:string[]) {

    //One Form Group for one country
    const countriesFGs = countries.map(country =>{
            let obj={};obj[country]=true;
            return this.fb.group(obj)
    });

    const countryFormArray = this.fb.array(countriesFGs);
    this.heroForm.setControl('countries', countryFormArray);
  }

Массив FormGroups для флажков используется для установки элемента управления для «стран» в родительской форме.

  get countries(): FormArray {
      return this.heroForm.get('countries') as FormArray;
  };

В шаблоне используйте канал, чтобы получить имя для элемента управления флажком

  <div formArrayName="countries" class="well well-lg">
      <div *ngFor="let country of countries.controls; let i=index" [formGroupName]="i" >
          <div *ngFor="let key of country.controls | mapToKeys" >
              <input type="checkbox" formControlName="{{key.key}}">{{key.key}}
          </div>
      </div>
  </div>

Я не вижу здесь решения, которое полностью отвечает на вопрос с использованием реактивных форм в максимальной степени, поэтому вот мое решение для того же самого.

Резюме

Вот суть подробного объяснения вместе с примером StackBlitz.

1. Используйте FormArrayдля флажков и инициализируйте форму.
2. valueChangesНаблюдаемым идеально подходит , когда вы хотите форму для отображения чего - то , но магазин что - то еще в компоненте. Сопоставьте true/false values ​​с желаемыми значениями.
3. Отфильтровать false значения во время отправки.
4. Отписаться от valueChangesнаблюдаемых.

Пример StackBlitz

Детальное объяснение

Используйте FormArray для определения формы

Как уже упоминалось в ответе отмечен как правильный. FormArrayэто способ пойти в таких случаях, когда вы предпочитаете получать данные в виде массива. Итак, первое, что вам нужно сделать, это создать форму.

checkboxGroup: FormGroup;
checkboxes = [{
    name: 'Value 1',
    value: 'value-1'
}, {
    name: 'Value 2',
    value: 'value-2'
}];

this.checkboxGroup = this.fb.group({
    checkboxes: this.fb.array(this.checkboxes.map(x => false))
});

Это просто установит начальное значение всех флажков на false .

Затем нам нужно зарегистрировать эти переменные формы в шаблоне и выполнить итерацию по checkboxesмассиву (НЕ FormArrayпо данным флажка), чтобы отобразить их в шаблоне.

<form [formGroup]="checkboxGroup">
    <ng-container *ngFor="let checkbox of checkboxes; let i = index" formArrayName="checkboxes">
        <input type="checkbox" [formControlName]="i" />{{checkbox.name}}
    </ng-container>
</form>

Используйте наблюдаемое valueChanges

Вот часть, о которой я не упоминаю ни в одном из приведенных здесь ответов. В таких ситуациях, как эта, когда мы хотели бы отобразить указанные данные, но сохранить их как что-то еще, valueChangesнаблюдаемое очень полезно. Используя valueChanges, мы можем наблюдать изменения в , checkboxesа затем mapв true/ falseзначения , полученные от FormArrayдо требуемых данных. Обратите внимание, что это не изменит выбор флажков, так как любое правдивое значение, переданное флажку , помечает его как отмеченное и наоборот.

subscription: Subscription;

const checkboxControl = (this.checkboxGroup.controls.checkboxes as FormArray);
this.subscription = checkboxControl.valueChanges.subscribe(checkbox => {
    checkboxControl.setValue(
        checkboxControl.value.map((value, i) => value ? this.checkboxes[i].value : false),
        { emitEvent: false }
    );
});

Это в основном сопоставляет FormArrayзначения с исходным checkboxesмассивом и возвращает, valueесли флажок отмечен как true, иначе он возвращается false. Здесь emitEvent: falseважен, так как установка FormArrayзначения без него приведет valueChangesк срабатыванию события, создающего бесконечный цикл. Установив emitEventна false, мы удостоверяясьvalueChanges наблюдаемое не излучает , когда мы устанавливаем значение здесь.

Отфильтруйте ложные значения

Мы не можем напрямую фильтровать falseзначения в, FormArrayпотому что это испортит шаблон, так как они привязаны к флажкам. Итак, лучшее возможное решение - отфильтровать falseзначения во время отправки. Для этого используйте оператор распространения.

submit() {
    const checkboxControl = (this.checkboxGroup.controls.checkboxes as FormArray);
    const formValue = {
        ...this.checkboxGroup.value,
        checkboxes: checkboxControl.value.filter(value => !!value)
    }
    // Submit formValue here instead of this.checkboxGroup.value as it contains the filtered data
}

Это в основном отфильтровывает ложные значения из файлаcheckboxes .

Отказаться от подписки на valueChanges

Наконец, не забудьте отказаться от подписки на valueChanges

ngOnDestroy() {
    this.subscription.unsubscribe();
}

Примечание. Существует особый случай, когда значение не может быть установлено на FormArrayвход valueChanges, т.е. если значение флажка установлено на число 0. Это будет выглядеть так, как будто флажок не может быть установлен, так как при установке флажка в FormControlкачестве числа 0(ложное значение) будет установлено, и, следовательно, он не будет установлен. Было бы предпочтительно не использовать число 0в качестве значения, но если это необходимо, вы должны условно установить 0какое-то истинное значение, скажем, строку '0'или просто, trueа затем при отправке преобразовать его обратно в число 0.

Пример StackBlitz

В StackBlitz также есть код, когда вы хотите передать флажкам значения по умолчанию, чтобы они помечались как отмеченные в пользовательском интерфейсе.

TL; DR

1. Я предпочитаю использовать FormGroup для заполнения списка флажков
2. Напишите собственный валидатор для проверки хотя бы одного флажка
3. Рабочий пример https://stackblitz.com/edit/angular-validate-at-least-one-checkbox-was-selected

Иногда это также поражало меня, поэтому я попробовал оба подхода - FormArray и FormGroup.

В большинстве случаев список флажков был заполнен на сервере, и я получал его через API. Но иногда у вас будет статический набор флажков с вашим предопределенным значением. В каждом варианте использования будет использоваться соответствующий FormArray или FormGroup.

В основном FormArrayэто вариант FormGroup. Ключевое отличие состоит в том, что его данные сериализуются как массив (в отличие от сериализации как объекта в случае FormGroup). Это может быть особенно полезно, когда вы не знаете, сколько элементов управления будет присутствовать в группе, например, динамических форм.

Для простоты представьте, что у вас есть простая форма создания продукта с

• Одно обязательное текстовое поле с названием продукта.
• Список категорий для выбора, требующий проверки хотя бы одной. Предположим, список будет получен с сервера.

Во-первых, я создал форму только с названием продукта formControl. Это обязательное поле.

this.form = this.formBuilder.group({
    name: ["", Validators.required]
});

Поскольку категория динамически отображается, мне придется добавить эти данные в форму позже, когда данные будут готовы.

this.getCategories().subscribe(categories => {
    this.form.addControl("categoriesFormArr", this.buildCategoryFormArr(categories));
    this.form.addControl("categoriesFormGroup", this.buildCategoryFormGroup(categories));
})

Есть два подхода к созданию списка категорий.

1. Сформировать массив

  buildCategoryFormArr(categories: ProductCategory[], selectedCategoryIds: string[] = []): FormArray {
    const controlArr = categories.map(category => {
      let isSelected = selectedCategoryIds.some(id => id === category.id);
      return this.formBuilder.control(isSelected);
    })
    return this.formBuilder.array(controlArr, atLeastOneCheckboxCheckedValidator())
  }

<div *ngFor="let control of categoriesFormArr?.controls; let i = index" class="checkbox">
  <label><input type="checkbox" [formControl]="control" />
    {{ categories[i]?.title }}
  </label>
</div>

это buildCategoryFormGroup вернет мне FormArray. Он также принимает список выбранных значений в качестве аргумента, поэтому, если вы хотите повторно использовать форму для редактирования данных, это может быть полезно. Для создания новой формы продукта он пока не применим.

Заметил, что при попытке доступа к значениям formArray. Это будет похоже [false, true, true]. Чтобы получить список выбранных идентификаторов, потребовалось немного больше работы для проверки из списка, но на основе индекса массива. Мне это не нравится, но работает.

get categoriesFormArraySelectedIds(): string[] {
  return this.categories
  .filter((cat, catIdx) => this.categoriesFormArr.controls.some((control, controlIdx) => catIdx === controlIdx && control.value))
  .map(cat => cat.id);
}

Вот почему я пришел к использованию FormGroupв этом отношении

2. Группа форм

Отличие formGroup в том, что данные формы будут храниться в виде объекта, для чего требуется ключ и элемент управления формой. Поэтому рекомендуется установить ключ как categoryId, а затем мы сможем получить его позже.

buildCategoryFormGroup(categories: ProductCategory[], selectedCategoryIds: string[] = []): FormGroup {
  let group = this.formBuilder.group({}, {
    validators: atLeastOneCheckboxCheckedValidator()
  });
  categories.forEach(category => {
    let isSelected = selectedCategoryIds.some(id => id === category.id);
    group.addControl(category.id, this.formBuilder.control(isSelected));
  })
  return group;
}

<div *ngFor="let item of categories; let i = index" class="checkbox">
  <label><input type="checkbox" [formControl]="categoriesFormGroup?.controls[item.id]" /> {{ categories[i]?.title }}
  </label>
</div>

Значение группы форм будет выглядеть так:

{
    "category1": false,
    "category2": true,
    "category3": true,
}

Но чаще всего мы хотим получить только список categoryIds как ["category2", "category3"]. Я также должен написать прием, чтобы взять эти данные. Мне этот подход больше нравится по сравнению с formArray, потому что я действительно мог взять значение из самой формы.

  get categoriesFormGroupSelectedIds(): string[] {
    let ids: string[] = [];
    for (var key in this.categoriesFormGroup.controls) {
      if (this.categoriesFormGroup.controls[key].value) {
        ids.push(key);
      }
      else {
        ids = ids.filter(id => id !== key);
      }
    }
    return ids;
  }

3. Пользовательский валидатор для проверки хотя бы одного флажка был выбран.

Я сделал валидатор, чтобы проверить, по крайней мере, флажок X был выбран, по умолчанию он будет проверять только один флажок.

export function atLeastOneCheckboxCheckedValidator(minRequired = 1): ValidatorFn {
  return function validate(formGroup: FormGroup) {
    let checked = 0;

    Object.keys(formGroup.controls).forEach(key => {
      const control = formGroup.controls[key];

      if (control.value === true) {
        checked++;
      }
    });

    if (checked < minRequired) {
      return {
        requireCheckboxToBeChecked: true,
      };
    }

    return null;
  };
}

Сделайте событие, когда он щелкнет, а затем вручную измените значение true на имя того, что представляет флажок, тогда имя или true будет оценивать то же самое, и вы можете получить все значения вместо списка true / false. Пример:

component.html

<form [formGroup]="customForm" (ngSubmit)="onSubmit()">
    <div class="form-group" *ngFor="let parameter of parameters"> <!--I iterate here to list all my checkboxes -->
        <label class="control-label" for="{{parameter.Title}}"> {{parameter.Title}} </label>
            <div class="checkbox">
              <input
                  type="checkbox"
                  id="{{parameter.Title}}"
                  formControlName="{{parameter.Title}}"
                  (change)="onCheckboxChange($event)"
                  > <!-- ^^THIS^^ is the important part -->
             </div>
      </div>
 </form>

component.ts

onCheckboxChange(event) {
    //We want to get back what the name of the checkbox represents, so I'm intercepting the event and
    //manually changing the value from true to the name of what is being checked.

    //check if the value is true first, if it is then change it to the name of the value
    //this way when it's set to false it will skip over this and make it false, thus unchecking
    //the box
    if(this.customForm.get(event.target.id).value) {
        this.customForm.patchValue({[event.target.id] : event.target.id}); //make sure to have the square brackets
    }
}

Это перехватывает событие после того, как оно уже было изменено на true или false с помощью Angular Forms, если оно истинно, я меняю имя на имя того, что представляет собой флажок, который при необходимости также будет оцениваться как true, если он проверяется на true / false как хорошо.

Если вы хотите использовать реактивную форму Angular ( https://angular.io/guide/reactive-forms ).

Вы можете использовать один элемент управления формы для управления выводимым значением группы флажков.

составная часть

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { flow } from 'lodash';
import { flatMap, filter } from 'lodash/fp';

@Component({
  selector: 'multi-checkbox',
  templateUrl: './multi-checkbox.layout.html',
})
export class MultiChecboxComponent  {

  checklistState = [ 
      {
        label: 'Frodo Baggins',
        value: 'frodo_baggins',
        checked: false
      },
      {
        label: 'Samwise Gamgee',
        value: 'samwise_gamgee',
        checked: true,
      },
      {
        label: 'Merry Brandybuck',
        value: 'merry_brandybuck',
        checked: false
      }
    ];

  form = new FormGroup({
    checklist : new FormControl(this.flattenValues(this.checklistState)),
  });


  checklist = this.form.get('checklist');

  onChecklistChange(checked, checkbox) {
    checkbox.checked = checked;
    this.checklist.setValue(this.flattenValues(this.checklistState));
  }

  flattenValues(checkboxes) {
    const flattenedValues = flow([
      filter(checkbox => checkbox.checked),
      flatMap(checkbox => checkbox.value )
    ])(checkboxes)
    return flattenedValues.join(',');
  }
}

html

<form [formGroup]="form">
    <label *ngFor="let checkbox of checklistState" class="checkbox-control">
    <input type="checkbox" (change)="onChecklistChange($event.target.checked, checkbox)" [checked]="checkbox.checked" [value]="checkbox.value" /> {{ checkbox.label }}
  </label>
</form>

checklistState

Управляет моделью / состоянием входных данных контрольного списка. Эта модель позволяет сопоставить текущее состояние с любым нужным форматом значений.

Модель:

{
   label: 'Value 1',
   value: 'value_1',
   checked: false
},
{
  label: 'Samwise Gamgee',
  value: 'samwise_gamgee',
  checked: true,
},
{
  label: 'Merry Brandybuck',
  value: 'merry_brandybuck',
  checked: false
}

checklist Контроль формы

Этот элемент управления хранит значение, которое вы хотите сохранить, например,

вывод значения: "value_1,value_2"

См. Демонстрацию на https://stackblitz.com/edit/angular-multi-checklist

Мое решение - решено для Angular 5 с представлением материалов
. Подключение осуществляется через

formArrayName = "уведомление"

(изменение) = "updateChkbxArray (n.id, $ event.checked, 'уведомление')"

Таким образом, он может работать с несколькими массивами флажков в одной форме. Просто задайте имя массива элементов управления для подключения каждый раз.

constructor(
  private fb: FormBuilder,
  private http: Http,
  private codeTableService: CodeTablesService) {

  this.codeTableService.getnotifications().subscribe(response => {
      this.notifications = response;
    })
    ...
}


createForm() {
  this.form = this.fb.group({
    notification: this.fb.array([])...
  });
}

ngOnInit() {
  this.createForm();
}

updateChkbxArray(id, isChecked, key) {
  const chkArray = < FormArray > this.form.get(key);
  if (isChecked) {
    chkArray.push(new FormControl(id));
  } else {
    let idx = chkArray.controls.findIndex(x => x.value == id);
    chkArray.removeAt(idx);
  }
}

<div class="col-md-12">
  <section class="checkbox-section text-center" *ngIf="notifications  && notifications.length > 0">
    <label class="example-margin">Notifications to send:</label>
    <p *ngFor="let n of notifications; let i = index" formArrayName="notification">
      <mat-checkbox class="checkbox-margin" (change)="updateChkbxArray(n.id, $event.checked, 'notification')" value="n.id">{{n.description}}</mat-checkbox>
    </p>
  </section>
</div>

В конце вы получаете возможность сохранить форму с массивом идентификаторов исходных записей для сохранения / обновления.

Будем рады любым замечаниям по улучшению.

ЧАСТЬ ШАБЛОНА: -

    <div class="form-group">
         <label for="options">Options:</label>
         <div *ngFor="let option of options">
            <label>
                <input type="checkbox"
                   name="options"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"
                                />
                  {{option.name}}
                  </label>
              </div>
              <br/>
         <button (click)="getselectedOptions()"  >Get Selected Items</button>
     </div>

ЧАСТЬ КОНТРОЛЛЕРА: -

        export class Angular2NgFor {

          constructor() {
             this.options = [
              {name:'OptionA', value:'first_opt', checked:true},
              {name:'OptionB', value:'second_opt', checked:false},
              {name:'OptionC', value:'third_opt', checked:true}
             ];


             this.getselectedOptions = function() {
               alert(this.options
                  .filter(opt => opt.checked)
                  .map(opt => opt.value));
                }
             }

        }

Добавьте мои 5 центов) Модель моего вопроса

{
   name: "what_is_it",
   options:[
     {
      label: 'Option name',
      value: '1'
     },
     {
      label: 'Option name 2',
      value: '2'
     }
   ]
}

template.html

<div class="question"  formGroupName="{{ question.name }}">
<div *ngFor="let opt of question.options; index as i" class="question__answer" >
  <input 
    type="checkbox" id="{{question.name}}_{{i}}"
    [name]="question.name" class="hidden question__input" 
    [value]="opt.value" 
    [formControlName]="opt.label"
   >
  <label for="{{question.name}}_{{i}}" class="question__label question__label_checkbox">
      {{opt.label}}
  </label>
</div>

component.ts

 onSubmit() {
    let formModel = {};
    for (let key in this.form.value) {
      if (typeof this.form.value[key] !== 'object') { 
        formModel[key] = this.form.value[key]
      } else { //if formgroup item
        formModel[key] = '';
        for (let k in this.form.value[key]) {
          if (this.form.value[key][k])
            formModel[key] = formModel[key] + k + ';'; //create string with ';' separators like 'a;b;c'
        }
      }
    }
     console.log(formModel)
   }

Связанный ответ на @ nash11, вот как вы создадите массив значений флажков

И

есть флажок, который также выбирает все флажки:

https://stackblitz.com/edit/angular-checkbox-custom-value-with-selectall