下面是一个使用Angular响应式表单,实现文本搜索和切换来过滤列表的示例代码。
在组件的HTML模板中,我们首先创建一个响应式表单,包含一个输入框和一个切换按钮:
- {{ item }}
接下来,在组件的TypeScript代码中,我们初始化表单并定义过滤逻辑:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-filter-list',
templateUrl: './filter-list.component.html',
styleUrls: ['./filter-list.component.css']
})
export class FilterListComponent implements OnInit {
searchForm: FormGroup;
items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
filteredItems: string[];
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.searchForm = this.formBuilder.group({
searchTerm: [''],
showAll: [false]
});
this.filteredItems = this.items;
this.searchForm.valueChanges.subscribe(value => {
this.filterItems(value.searchTerm, value.showAll);
});
}
filterItems(searchTerm: string, showAll: boolean) {
if (showAll) {
this.filteredItems = this.items;
} else {
this.filteredItems = this.items.filter(item =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
}
}
}
在以上代码中,我们使用FormBuilder
创建一个响应式表单,并为输入框和切换按钮分别指定了formControlName
。在组件的ngOnInit
方法中,我们初始化了表单,并订阅了表单值的变化。当表单值发生变化时,调用filterItems
方法来过滤列表。
在filterItems
方法中,我们根据showAll
的值来判断是否显示所有项。如果showAll
为true
,则将filteredItems
设置为全部项。否则,使用Array.filter
方法过滤出包含搜索关键字的项,并将结果赋值给filteredItems
。
通过上述代码,我们实现了一个简单的Angular响应式表单,可以使用文本搜索和切换来过滤列表。