angular - 将在 mat select 中保持多重选择的表单控件设置为 null

Question

配合选择具有多选功能。如何将持有这些多项选择的表单控件值设置为空......在我的情况下它不起作用......

reset(){
    this.form.reset();
    return false
    }

this.form = this.formBuilder.group({
      category: [''],
});

在模板中

<mat-form-field appearance="outline">
                        <mat-label>Categories</mat-label>
                        <mat-select formControlName="category" multiple>
                          <mat-select-trigger>
                        <mat-icon matPrefix *ngIf="f['category'].value" (click)="clearCategory($event)"
                         class="icon" title="clear">clear</mat-icon>
                            {{f['category'].value ? f['category'].value[0] : ''}}
                            <span *ngIf="f['category'].value?.length > 1" class="example-additional-selection">
                              (+{{f['category'].value.length - 1}} {{f['category'].value?.length === 2 ? 'other' : 'others'}})
                            </span>
                          </mat-select-trigger>
                          <mat-option #allSelectedCategories (click)="toggleAllCategories()" [value]="0" >
                              All Categories (default)
                          </mat-option>
                          <mat-option *ngFor="let category of categories" 
                          (click)="toggleOnCategory(allSelectedCategories.viewValue)"
                          [value]="category">{{category}}</mat-option>
                        </mat-select>
                      </mat-form-field> 

单击重置按钮时，类别的值不会从表单值中清除，而只能从输入字段中清除

 <button type="reset" mat-raised-button (click)="reset()" 
                      style="margin-right: 5px;">
                        Reset
                    </button>

Answer 1

您希望按钮清除所有多选复选框吗？换句话说，用户检查了几个然后你想将它们重置为不检查？

尝试这个：

selectedOptions = [];

更新：对此感到抱歉，您需要类似的东西：

<mat-selection-list [(ngModel)]="selectedOptions" [compareWith]="compareFunction">

Answer 2

.reset()不清除表单控件中的值。它将控件的值重置为进行更改之前的值。这在 Angular（在所有变体中，例如FormControl.reset()、NgForm.resetForm()等）和纯 JavaScript 中的工作方式相同。