在Angular Material 7中,使用自动完成组件时,可能会遇到在表单提交后无法重置自动完成的问题。以下是一个解决方法:
@ViewChild
装饰器引用表单和自动完成组件,并在提交表单后重置自动完成:import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent {
@ViewChild('myForm', { static: false }) myForm: NgForm;
@ViewChild(MatAutocompleteTrigger, { static: false }) autocomplete: MatAutocompleteTrigger;
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
resetForm() {
this.myForm.resetForm();
this.autocomplete.closePanel();
}
submitForm() {
// 提交表单的逻辑
}
}
在上面的代码中,resetForm()
方法会重置表单并关闭自动完成面板。myForm
是表单的引用变量,autocomplete
是自动完成组件的引用变量。resetForm()
方法中的this.myForm.resetForm()
将重置整个表单,而this.autocomplete.closePanel()
会关闭自动完成面板。
请注意,@ViewChild
装饰器中的{ static: false }
选项用于确保在组件初始化之后引用变量才可用。
希望这个解决方法能够帮助你解决Angular Material 7在表单提交后重置自动完成时出现的问题!