angularにおける複数チェックボックスの必須チェック

前提・実現したいこと

angularにおける複数チェックボックスのバリデーション。
3つのチェックボックスが存在していて、一つもチェックされていない場合はエラー、一つでもチェックされていればエラーが出ないようにしたいです。
チェックボックスはngForで表示して、ngFormのinvalidでエラーの状態は受け取りたいです。
拙い質問ですが、ご回答いただけると幸いです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<form #myForm="ngForm">
2
3  <div *ngFor="let c of checkbox_group1; let i = index">
4    <label>
5      <input type="checkbox" name="group1_{{i}}" #checkbox_info="ngModel" [(ngModel)]="c.selected">{{c.title}}
6    </label>
7  </div>
8
9  <div *ngIf="myForm.invalid">
10    エラーあり
11  </div>
12</form>

ts
1import { Component, OnInit } from '@angular/core';
2
3@Component({
4  selector: 'app-regist',
5  templateUrl: './regist.component.html',
6  styleUrls: ['./regist.component.scss']
7})
8export class RegistComponent implements OnInit {
9
10  checkbox_group1 = [
11    { title: 'check1', selected: false },
12    { title: 'check2', selected: false },
13    { title: 'check3', selected: false }
14  ];
15
16  constructor() { }
17
18  ngOnInit() {
19  }
20
21}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

さっきひらめいてできました！
checkboxのrequiredを動的に切り替えて実現しています。
同じような内容で困っている方の手助けになれば幸いです。

html
1<form #myForm="ngForm">
2
3  <!-- グループ1 -->
4  <div class="group" [class.error]="error_flg[0]">
5    <div *ngFor="let c of checkbox[0]; let i = index">
6      <label>
7        <input type="checkbox" name="group1_{{i}}" [(ngModel)]="c.selected" (ngModelChange)="change()"
8          [required]="error_flg[0]">{{c.title}}
9      </label>
10    </div>
11  </div>
12
13  <!-- グループ2 -->
14  <div class="group" [class.error]="error_flg[1]">
15    <div *ngFor="let c of checkbox[1]; let i = index">
16      <label>
17        <input type="checkbox" name="group2_{{i}}" [(ngModel)]="c.selected" (ngModelChange)="change()"
18          [required]="error_flg[1]">{{c.title}}
19      </label>
20    </div>
21  </div>
22
23  <!-- グループ3 -->
24  <div class="group" [class.error]="error_flg[2]">
25    <div *ngFor="let c of checkbox[2]; let i = index">
26      <label>
27        <input type="checkbox" name="group3_{{i}}" [(ngModel)]="c.selected" (ngModelChange)="change()"
28          [required]="error_flg[2]">{{c.title}}
29      </label>
30    </div>
31  </div>
32
33  <p>invalid:{{myForm.invalid}}</p>
34  <button type="submit" (click)="submit(myForm.invalid)">送信</button>
35</form>
36

ts
1import { Component, OnInit } from '@angular/core';
2
3@Component({
4  selector: 'app-regist',
5  templateUrl: './regist.component.html',
6  styleUrls: ['./regist.component.scss']
7})
8export class RegistComponent implements OnInit {
9
10  checkbox = [
11    [
12      { title: 'check1', selected: false },
13      { title: 'check2', selected: false },
14      { title: 'check3', selected: false }
15    ],
16    [
17      { title: 'check1', selected: false },
18      { title: 'check2', selected: false },
19      { title: 'check3', selected: false }
20    ],
21    [
22      { title: 'check1', selected: false },
23      { title: 'check2', selected: false },
24      { title: 'check3', selected: false }
25    ]
26  ];
27  error_flg = [false, false, false];
28
29  constructor() { }
30
31  ngOnInit() {
32    this.change();
33  }
34
35  change() {
36    for (var i = 0; i < this.checkbox.length; i++) {
37      if (this.checkbox[i].filter((object) => object.selected).length) {
38        this.error_flg[i] = false;
39      } else {
40        this.error_flg[i] = true;
41      }
42    }
43  }
44
45  submit(error: boolean) {
46    if (!error) {
47      console.log('success');
48    } else {
49      console.log('error');
50    }
51  }
52
53}

ただ、ngFormのinvalidを*ngIfに渡すと、invalidが切り替わった際に以下のようなエラーが出てしまいます。
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.

このエラーが出ないようにできる方いましたら教えていただきたいです。
*ngIfを使わない方はぜひ上記の方法試してみてください！

投稿2019/11/23 15:03

Masasami

総合スコア9