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

Question

前提・実現したいこと

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

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

エラーメッセージ

該当のソースコード

<form #myForm="ngForm">

  <div *ngFor="let c of checkbox_group1; let i = index">
    <label>
      <input type="checkbox" name="group1_{{i}}" #checkbox_info="ngModel" [(ngModel)]="c.selected">{{c.title}}
    </label>
  </div>

  <div *ngIf="myForm.invalid">
    エラーあり
  </div>
</form>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-regist',
  templateUrl: './regist.component.html',
  styleUrls: ['./regist.component.scss']
})
export class RegistComponent implements OnInit {

  checkbox_group1 = [
    { title: 'check1', selected: false },
    { title: 'check2', selected: false },
    { title: 'check3', selected: false }
  ];

  constructor() { }

  ngOnInit() {
  }

}

試したこと

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

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

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

Answer 1

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

<form #myForm="ngForm">

  <!-- グループ1 -->
  <div class="group" [class.error]="error_flg[0]">
    <div *ngFor="let c of checkbox[0]; let i = index">
      <label>
        <input type="checkbox" name="group1_{{i}}" [(ngModel)]="c.selected" (ngModelChange)="change()"
          [required]="error_flg[0]">{{c.title}}
      </label>
    </div>
  </div>

  <!-- グループ2 -->
  <div class="group" [class.error]="error_flg[1]">
    <div *ngFor="let c of checkbox[1]; let i = index">
      <label>
        <input type="checkbox" name="group2_{{i}}" [(ngModel)]="c.selected" (ngModelChange)="change()"
          [required]="error_flg[1]">{{c.title}}
      </label>
    </div>
  </div>

  <!-- グループ3 -->
  <div class="group" [class.error]="error_flg[2]">
    <div *ngFor="let c of checkbox[2]; let i = index">
      <label>
        <input type="checkbox" name="group3_{{i}}" [(ngModel)]="c.selected" (ngModelChange)="change()"
          [required]="error_flg[2]">{{c.title}}
      </label>
    </div>
  </div>

  <p>invalid:{{myForm.invalid}}</p>
  <button type="submit" (click)="submit(myForm.invalid)">送信</button>
</form>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-regist',
  templateUrl: './regist.component.html',
  styleUrls: ['./regist.component.scss']
})
export class RegistComponent implements OnInit {

  checkbox = [
    [
      { title: 'check1', selected: false },
      { title: 'check2', selected: false },
      { title: 'check3', selected: false }
    ],
    [
      { title: 'check1', selected: false },
      { title: 'check2', selected: false },
      { title: 'check3', selected: false }
    ],
    [
      { title: 'check1', selected: false },
      { title: 'check2', selected: false },
      { title: 'check3', selected: false }
    ]
  ];
  error_flg = [false, false, false];

  constructor() { }

  ngOnInit() {
    this.change();
  }

  change() {
    for (var i = 0; i < this.checkbox.length; i++) {
      if (this.checkbox[i].filter((object) => object.selected).length) {
        this.error_flg[i] = false;
      } else {
        this.error_flg[i] = true;
      }
    }
  }

  submit(error: boolean) {
    if (!error) {
      console.log('success');
    } else {
      console.log('error');
    }
  }

}

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

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