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', ...]

silentsodの回答を利用して、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']

不足しているのは1つだけです。モデルがすでに値をチェックしている場合にformArrayに入力する関数です。

https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.htmlを使用するのに適した場所は次のFormArray とおりです

開始するには、コントロールの配列を作成するか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 to poke through

チェックボックスの情報がAPIから非同期で入力された場合でも、Angular 6ではこれを以前のバージョンよりもはるかに簡単に実行できます。

最初に理解することは、Angular 6のkeyvalueパイプのおかげで、FormArrayもう使用する必要がなく、代わりにをネストできることFormGroupです。

まず、FormBuilderをコンストラクタに渡します

constructor(
    private _formBuilder: FormBuilder,
) { }

次に、フォームを初期化します。

ngOnInit() {

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

}

チェックボックスオプションデータが利用可能になったら、それを反復処理し、番号付きのルックアップ配列に依存する必要なくFormGroup、それをnamedとしてネストに直接プッシュでき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>

TL; DR

1. チェックボックスのリストを入力するためにFormGroupを使用する
2. 少なくとも1つのチェックボックスが選択されていることを確認するためのカスタムバリデーターを作成する
3. 動作例https://stackblitz.com/edit/angular-validate-at-least-one-checkbox-was-selected

これも時々私を襲ったので、私はFormArrayとFormGroupの両方のアプローチを試しました。

ほとんどの場合、チェックボックスのリストはサーバーに入力され、APIを介してそれを受け取りました。ただし、事前定義された値を持つチェックボックスの静的セットがある場合があります。ユースケースごとに、対応するFormArrayまたはFormGroupが使用されます。

基本的にFormArrayはのバリアントですFormGroup。主な違いは、データが配列としてシリアル化されることです（FormGroupの場合はオブジェクトとしてシリアル化されるのとは対照的です）。これは、動的フォームのように、グループ内に存在するコントロールの数がわからない場合に特に役立ちます。

簡単にするために、単純な製品作成フォームがあるとします。

• 1つの必須の製品名テキストボックス。
• 選択するカテゴリのリスト。少なくとも1つはチェックする必要があります。リストがサーバーから取得されると仮定します。

まず、製品名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));
})

カテゴリリストを作成するには、2つの方法があります。

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]。選択されたIDのリストを取得するには、リストからチェックするのにもう少し作業が必要でしたが、配列のインデックスに基づいていました。私には良く聞こえませんが、動作します。

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,
}

しかし、ほとんどの場合、categoryIdのリストのみを取得する必要があります["category2", "category3"]。これらのデータを取得するためのgetも作成する必要があります。実際にフォーム自体から値を取得できるため、この方法は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.少なくとも1つのチェックボックスをチェックするカスタムバリデーターが選択されました

少なくともXチェックボックスをオンにするようにバリデーターを選択しました。デフォルトでは、1つのチェックボックスのみをチェックします。

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

ここでは、反応型を使用して質問に完全に答えるソリューションが見当たらないので、これに対する私のソリューションを示します。

概要

StackBlitzの例とともに詳細な説明の要点を示します。

1. FormArrayチェックボックスに使用し、フォームを初期化します。
2. valueChanges観察可能なあなたは、ディスプレイに何かが、コンポーネント内の他の店のものを形にしたいときに最適です。マップtrue/のfalseここで所望の値に値を。
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値をフィルターで取り除くことです。これを行うには、spread演算子を使用します。

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

注：値をFormArrayin valueChangesに設定できない特殊なケースがあります。つまり、チェックボックスの値がnumberに設定されている場合0です。これにより、チェックボックスを選択するとFormControl番号0（偽の値）が設定されるため、チェックボックスをオフにしたままにできるため、チェックボックスを選択できないように見えます。0数値を値として使用しないことが推奨されますが、必要に応じて、条件付きで0真の値、たとえば文字列'0'または単純に設定し、送信時に数値trueに戻す必要があります0。

StackBlitzの例

StackBlitzには、デフォルト値をチェックボックスに渡し、UIでチェック済みとしてマークされるようにする場合のコードもあります。

クリックされたときにイベントを作成し、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
    }
}

これは、Angular Formsによってすでにtrueまたはfalseに変更された後にイベントをキャッチします。trueの場合、名前をチェックボックスが表すものの名前に変更します。必要に応じて、true / falseがチェックされている場合もtrueに評価されます。上手。

Angular反応フォームを使用する場合（https://angular.io/guide/reactive-forms）。

1つのフォームコントロールを使用して、チェックボックスのグループの出力値を管理できます。

成分

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 = "notification"

（変更）= "updateChkbxArray（n.id、$ event.checked、 'notification'）"

このように、1つのフォームで複数のチェックボックス配列に対して機能します。毎回接続するコントロール配列の名前を設定するだけです。

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>

最後に、保存/更新する元のレコードIDの配列でフォームを保存します。

改善のためのご意見をお待ちしております。

テンプレート部：-

    <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