Блог

Есть элемент mat-select

 <mat-form-field id="statusField">
     <mat-select disableOptionCentering placeholder="Status" formControlName="statusField">
         <mat-option *ngFor="let status of allTaskStatuses; trackBy: trackByFn" [value]="status">
               {{ status.name }}
         </mat-option>
     </mat-select>
</mat-form-field>
 

Также есть кнопка для очистки поля

 clearField(event: MouseEvent, fieldName: string): void {
        event.stopPropagation();
        this.filterFormGroup.get(fieldName).reset();
}
 

После того, как я выбираю любую опцию и нажимаю кнопку для сброса, поле становится пустым, но в выпадающем списке предыдущий выбор по-прежнему выделяется.

Я пробовал .setValue(null) вместо .reset() , но нет никакой разницы.

Если выполнить console.log(this.fieldFormGroup.get('statusField')) после нажатия кнопки, я увижу value: null свойство.

не уверен, отвечает ли это на ваши вопросы, но почему бы вам просто не установить для вашего выбора значение '' ?

У меня была очень быстрая попытка с помощью стекблита, который я нашел вокруг: link. Я добавил кнопку «очистить», и она удаляет текст и предыдущее выделение… это то, что вы ищете?