Angular Academy · 课时

异步验证器

Q: 「异步验证器」这节课中我会学到什么？

异步向服务器发起验证 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

异步向服务器发起验证

第 3 / 4 课13 个步骤

异步验证器 是 CoddyKit 上的免费 Angular Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

等待完成的验证

有些验证需要访问服务器，例如检查用户名是否已被占用。异步验证器会返回一个 Promise 或 Observable，该对象解析为错误映射或 null。

AsyncValidatorFn 类型

异步验证器接收一个控制项，并返回 Observable<ValidationErrors | null>（或 Promise）。

const v: AsyncValidatorFn = (control) => {
  return checkAvailable(control.value);
};

返回 null 表示有效

值有效时解析为 null，无效时解析为类似 { taken: true } 的错误对象，这与同步验证器完全相同。

用户名验证器

此验证器会调用服务并映射结果。

usernameValidator(api: UserApi): AsyncValidatorFn {
  return (control) =>
    api.isTaken(control.value).pipe(
      map(taken => taken ? { taken: true } : null)
    );
}

注册验证器

异步验证器应作为控制项的第三个参数传入，与同步验证器分开。

new FormControl('', {
  validators: [Validators.required],
  asyncValidators: [usernameValidator(api)]
});

PENDING 状态

异步验证器运行期间，控制项的状态为 PENDING。您可以利用它显示加载指示器。

@if (form.controls.username.pending) {
  <span>Checking...</span>
}

请求防抖

异步验证器会在每次值发生变化时触发。请使用防抖，避免频繁请求服务器。

return timer(300).pipe(
  switchMap(() => api.isTaken(control.value)),
  map(taken => taken ? { taken: true } : null)
);

switchMap 取消过时调用

使用 switchMap 后，值再次变化时会取消上一个正在进行的请求，因此只有最新结果才会生效。

updateOn 策略

设置 updateOn: 'blur'，使异步验证仅在用户离开字段时运行，从而减少请求。

new FormControl('', {
  asyncValidators: [usernameValidator(api)],
  updateOn: 'blur'
});

读取错误

验证完成且控制项已变脏或获得焦点后，显示错误信息。

@if (form.controls.username.hasError('taken')) {
  <span>Username already taken</span>
}

最佳实践

请始终使用防抖、取消过时请求、显示等待指示器，并处理网络错误，以免表单一直停留在 PENDING 状态。

快速检查

测试您对异步验证器的理解。

在交互式课程中回答

回顾

您了解到，AsyncValidatorFn 返回一个包含 ValidationErrors | null 的 Observable/Promise，并在控制项的第三个参数中注册，使控制项进入 PENDING 状态。请使用防抖和 switchMap 管理服务器调用。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 38
课程: 144

免费开始学习查看完整课程

常见问题解答

「异步验证器」课时是免费的吗？

是的 — 「异步验证器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「异步验证器」这节课中我会学到什么？

异步向服务器发起验证你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「异步验证器」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy