Как проверить три флажка с модулем реактивных форм?

Question

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

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

Я пытался использовать пользовательский валидатор, но вы можете только передать элемент управления. Мне нужно что-то, что проверяет все поля для проверки.

<form class="example-section" [formGroup]="queryType">
  <mat-checkbox class="example-margin" [(ngModel)]="artist" formControlName="artist">Artist</mat-checkbox>
  <mat-checkbox class="example-margin" [(ngModel)]="album" formControlName="album">Album</mat-checkbox>
  <mat-checkbox class="example-margin" [(ngModel)]="track" formControlName="track">Track</mat-checkbox>
</form>```

 export class SearchComponent implements OnInit, OnChanges {

  filteredSearchItems: Observable<SearchResult[]>;
  isLoading = false;
  searchForm: FormGroup;
  queryType: FormGroup;
  disabled: boolean = false;
  artist: boolean;
  album: boolean;
  track: boolean;



constructor(private searchService: SearchService, private fb: 
  FormBuilder) {
this.searchForm = this.fb.group({
  searchInput: new FormControl(null)
});
this.queryType = this.fb.group({
 'artist': new FormControl(false,[CustomValidators.validateQuery]),
  'album': new FormControl(false,[CustomValidators.validateQuery]),
  'track': new FormControl(false,[CustomValidators.validateQuery])
});

}

export class CustomValidators {

    static validateQuery(control: FormGroup): { [s: string]: boolean } 
       {//not sure how to pass in all boxes


   for(const con of control.controls) { // somewhere here is the answer
            if(con.value) {
            return { alreadyChecked: true} 
            }
        }

        return null;
    };
}

Answer 1

Есть 2 возможных решения для этого.

1.) Вы можете использовать переключатель вместо флажка, таким образом, вы можете выбрать только один из этих 3 вариантов.

2.) Если вы действительно хотите использовать флажок. Вы можете реализовать это так. Также создали Stackblitz Demo для вашей справки

<mat-checkbox class="example-margin" 
              formControlName="artist"
              [disabled]="album || track">Artist</mat-checkbox>   // This will be disabled when album or track is already checked

<mat-checkbox class="example-margin" 
              formControlName="album"
              [disabled]="artist || track">Album</mat-checkbox>   // This will be disabled when artist or track is already checked

<mat-checkbox class="example-margin" 
              formControlName="track"
              [disabled]="artist || album">Track</mat-checkbox>   // This will be disabled when artist or album is already checked.

При этом пользователь может проверить только один элемент из этих 3 вариантов.

Примечание:

• Вы должны решить, будете ли вы использовать управляемую шаблоном форму [(ngModel)] или модуль реактивной формы (formControlName), поскольку вы не можете объединить эти два элемента внутри тега ввода.