FormControl 在 mat-multiselect- Angular Material 中无法正常工作

Question

让我们讨论一下代码概览，我在多复选框中绑定了学生姓名 mat-select angular material.I 默认情况下绑定了前三个学生在初始加载应用程序时我们可以看到学生的三个复选框默认勾选。

应用程序有另一个条件：从所有学生列表中，用户可以 select 任何并且只有三个学生，如果用户尝试 select 超过三个学生，我会显示警报消息 "Maximum of 3 Student can be selected!"

 <mat-form-field>
          <mat-select placeholder="Select Student"
                      [formControl]="studentdropdownsControl" multiple>
            <mat-option *ngFor="let student of studentdropdowns" [value]="student.value"
              (click)="studentdropdown($event,student,studentdropdownsControl)">
              {{student.value}}
            </mat-option>
          </mat-select>
  </mat-form-field>

 studentdropdownsControl = new FormControl();
   selectedstudent =[];
   studentdropdowns = [{value: "Rickey",  id: 0},{value: "JohnSon", id: 1},{value: "Salmon",  id: 2},{value: "vickey", id: 3},{value: "Jony",  id: 4}, {value: "Rock/679",  id: 5},{value: "Batista/641", id: 6},{value: "Sunny/859",  id: 7},{value: "Eliza/1090", id: 8}]

  ngOnit()
  {
    this.getstudentCallsdropdown();
  }


   public async getstudentCallsdropdown(): Promise<void> {

        {
          // Logic to bind by default three student checkbox in dropdown on intial loading 
          this.studentdropdownsControl = new FormControl([this.studentdropdowns[0].value, this.studentdropdowns[1].value, this.studentdropdowns[2].value]);
        }

  }

   public studentdropdown(event: MatOptionSelectionChange, value: string, selectedstudent: any): void {

   //selectedstudent is nothing but value of select and deselect checkbox.
    this.selectedstudent = selectedstudent.id;

     if (this.selectedstudent.length > 3) {
      this.studentdropdownsControl = new FormControl([this.selectedstudent[0], this.selectedstudent[1], 
      this.selectedstudent[2]]);
      alert("Maximum of 3 Studentcan be selected!");
    }
  }

现在让我们讨论上图中的问题，我正在尝试 select vickey，是的，我无法 select。太完美了！, Condition(if (this.selectedstudent.length > 3)) 工作正常但现在看下图

一旦我们点击 windows 警报的确定

我有 select 三个学生，现在当我尝试 select 三文鱼和这里我的条件（如果（this.selectedstudent.length > 3））失败并且能够 select 或对 Salmon 进行标记检查，有趣的是它会自动 deselect Vickey。所以通过与其他学生核对，我观察到了一件事 "from Upside(top) to Downside(bottom) my condition is working fine and its not working Downside(bottom) to upside(top)".

为什么会这样遗漏了什么？或者它在数组中绑定元素的问题或者它的表单控件的奇怪行为。

Answer 1

当你 select 第 4 名的 3dr 学生已经 select 时，它会 select 它，然后在你的函数中检查是否有最多 3 个你拿 3第 select 个。

      new FormControl([this.selectedstudent[0], this.selectedstudent[1], this.selectedstudent[2]]);

这些将从第一个到最后一个顺序排列，因此您将删除select 第 4 个而不是您刚刚 select 编辑的（第 3 个）。

你不应该这样做，没有理由每次都创建一个新的表单控件。您应该使用 ngModel 来保存 selected 项目的列表。您可以修改 ngModel 以防止 selecting 更多。（小心，您需要改变数组才能意识到它已更新。）参见示例：https://stackblitz.com/edit/angular-sobw4u

  change(topping: string): void {
      console.log(this.selectedToppings);
      if(this.selectedToppings.length > 3) {
        this.selectedToppings = this.selectedToppings.filter(e => e !== topping);
      }
  }

Answer 2

很简单！只需从 selectedstudent 数组中删除那些额外选择的学生，因为您需要查找或为额外选择的学生

提供索引

 public studentdropdown(event: MatOptionSelectionChange,newexstrastudent: string, value: string, selectedstudent: any): void {

   //selectedstudent is nothing but value of select and deselect checkbox.
    this.selectedstudent = selectedstudent.id;
   
     if (this.selectedstudent.length > 3) {
     let selectedstudentindex = this.selectedstudent.findIndex(res => { return res == newexstrastudent });
     this.selectedstudent.splice(selectedstudentindex, 1);
     this.studentdropdownsControl = new FormControl([this.selectedstudent[0], this.selectedstudent[1], 
     this.selectedstudent[2]]);
     alert("Maximum of 3 Studentcan be selected!");
    }
    
}

FormControl 在 mat-multiselect- Angular Material 中无法正常工作

FormControl not working Properly in mat-multiselect- Angular Material

checkbox

form-control

angular-material

angular