javascript - Angular の項目リストからフォーム検証を追加する方法

Question

検証を行うリアクティブ フォームがあり、アイテムのリストに追加のチェックを追加する方法を見つけようとしています。元。他の必須フィールドに加えて、フォームが有効であることを確認するために、少なくとも 1 つの項目をチェックする必要があります。

表示されているフォームの項目は次のとおりです。「practicingStyles」という配列からのアイテムのリストであり、ボタンとして表示されていることがわかります

元。

 selectedPracticingStyles: number[] = [];

togglePracticeClass(style: number) {
  if (!this.selectedPracticingStyles.includes(style)) {
    this.selectedPracticingStyles.push(style);
  } else {
    this.selectedPracticingStyles.splice(this.selectedPracticingStyles.indexOf(style), 1);
  }
}

<div class="form-group">
  <label class="control-label">Practicing Styles:</label>
  <div class="btn-toolbar special">
    <ng-container *ngFor="let practiceStyle of practicingStyles; let i = index">
      <button type="button" class="btn mb-2" (click)="togglePracticeClass(practiceStyle.id)">
{{practiceStyle.name}}
     </button>
    </ng-container>
  </div>
</div>

.ts の私のフォームは次のようになり、別のフィールド 'practicedStyles' を追加し、チェック '[null, this.selectedPracticingStyles.length > 0]' を追加すると、それが検証されると思いましたが、機能しません。 .

this.infoForm = this.fb.group({
  gender: [null, Validators.required],
  introduction: [null],
  yearStarted: [null, Validators.required],
  experience: [null, Validators.required],
  practicedStyles: [null, this.selectedPracticingStyles.length > 0]
});

どんな助けでも大歓迎です。