重复选择

Question

我从数据库中提取了数据以进行mat-select。因此，我的用户可以为其团队选择4个防御者，因此将从数据库中获取4个席位选择的防御者。但是用户可以在这4个选择垫中选择相同的播放器，我想对此进行保护。

看到了：

在这里您可以看到选择一名防守者的选择

在第二个选择中，您可以从相同的防御者中进行选择，但是如果用户像选择一个之前一样选择相同的防御者，则系统会允许他。但是我不知道。

关于我的代码，这是我的HTML的一部分：

HTML：

<mat-card>
  <mat-spinner *ngIf="isLoading"></mat-spinner>
  <form [formGroup]="form" (submit)="onSaveUserTeam()" *ngIf="!isLoading">

    <h3>Name: </h3>
    <mat-form-field>
      <input matInput type="text" formControlName="name" placeholder="UserTeam name">
      <mat-error *ngIf="form.get('name').invalid">Please enter a userTeam name.</mat-error>
    </mat-form-field>

   <h3>Goalkeeper: </h3>
  <mat-form-field>
   <mat-select placeholder="Goalkeepers" formControlName="goalkeeper">
  <mat-option *ngFor="let player of goalkeepers" [value]="player.id">
        {{player.name}} {{player.surename}} ({{player.price}}M)

        {{sumPrice(userTeam.badget,player.price)}}
</mat-option>
</mat-select>
  <mat-error *ngIf="form.get('goalkeeper').invalid">Pleasse enter a goalkeeper.</mat-error>
</mat-form-field>

    <h3>Goalkeeper substitution: </h3>
    <mat-form-field>
        <mat-select placeholder="Goalkeepers sub" formControlName="goalkeeper_sub">
       <mat-option *ngFor="let player of goalkeepers" [value]="player.id">
              {{player.name}} {{player.surename}} ({{player.price}}M)

              {{sumPrice(userTeam.badget,player.price)}}
       </mat-option>
     </mat-select>
     <mat-error *ngIf="form.get('goalkeeper_sub').invalid">Please enter a userTeam goalkeeper_sub.</mat-error>
    </mat-form-field>

    <h3>Defender: </h3>
    <mat-form-field>
        <mat-select placeholder="defender1" formControlName="defender1">
       <mat-option *ngFor="let player of defenders" [value]="player.id">
              {{player.name}} {{player.surename}} ({{player.price}}M)
       </mat-option>
     </mat-select>
     <mat-error *ngIf="form.get('defender1').invalid">Please enter a userTeam defender1.</mat-error>
    </mat-form-field>

    <h3>Defender: </h3>
    <mat-form-field>
        <mat-select placeholder="defender2" formControlName="defender2">
       <mat-option *ngFor="let player of defenders" [value]="player.id">
              {{player.name}} {{player.surename}} ({{player.price}}M)
       </mat-option>
     </mat-select>
     <mat-error *ngIf="form.get('defender2').invalid">Please enter a userTeam defender2.</mat-error>
    </mat-form-field>
</mat-card>

和TS文件： 验证的部分代码：

this.form = new FormGroup({

      name: new FormControl(null, {
        validators: [Validators.required]
      }),
      goalkeeper: new FormControl(null, {
        validators: [Validators.required]
      }),
      goalkeeper_sub: new FormControl(null, {
        validators: [Validators.required]
      }),
      defender1: new FormControl(null, {
        validators: [Validators.required]
      }),
      defender2: new FormControl(null, {
        validators: [Validators.required]
      }),

并保存团队：

onSaveUserTeam() {
    if (this.form.invalid) {
      return;
    }

    this.isLoading = true;
    if (this.mode === "create") {
        this.userTeamsService.addUserTeam(
        this.form.value.name,
        this.form.value.badget,

        this.form.value.goalkeeper,
        this.form.value.goalkeeper_sub,

        this.form.value.defender1,
        this.form.value.defender2,
        this.form.value.defender3,
        this.form.value.defender4,
      );

可以给我建议，如何保护这个问题？非常感谢。