25、Angular开发：表单验证、搜索功能与HTTP交互

Angular开发：表单验证、搜索功能与HTTP交互

1. ngAuction项目代码重构

在ngAuction项目中，进行了多方面的代码重构，包括表单验证、搜索功能以及组件和路由的调整。

1.1 表单验证

matInput 指令有 errorStateMatcher 属性，它接收 ErrorStateMatcher 对象的实例。该对象必须实现 isErrorState() 方法，此方法接收表单控件和表单，并包含应用逻辑以决定是否显示错误消息。例如，当控件的值无效或 minLessThanMax 验证器返回错误时，此函数返回 true （显示错误）。

在搜索产品时，URL会包含搜索参数。例如，在标题字段中输入“red”并点击搜索，会调用 Router.navigate() ，URL将变为 localhost:4200/search-results?title=red 。 withoutEmptyValues() 函数确保未使用的搜索参数（如最小和最大价格）不会用于查询参数。

1.2 搜索结果组件

搜索结果组件通过 ActivatedRoute 对象的 queryParams 可观察属性接收查询参数。使用 switchMap 操作符，将 query