首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular:我不能使用*ngIf在UI中显示Asyn验证器的错误

Angular是一种流行的前端开发框架,它使用TypeScript编写,并且由Google维护和支持。它提供了一种结构化的方法来构建Web应用程序,并且具有丰富的功能和工具集。

在Angular中,ngIf是一个内置的指令,用于根据条件来显示或隐藏DOM元素。然而,ngIf只能用于同步验证器的错误,而不能直接用于异步验证器的错误。

异步验证器是一种用于验证表单输入的机制,它可以在后台执行异步操作,例如从服务器获取数据进行验证。由于异步操作需要一定的时间来完成,因此无法在模板中直接使用*ngIf来显示异步验证器的错误。

解决这个问题的一种常见方法是使用一个自定义指令来处理异步验证器的错误显示。通过自定义指令,我们可以在组件中订阅异步验证器的状态,并根据状态来显示或隐藏错误消息。

以下是一个示例自定义指令,用于显示异步验证器的错误消息:

代码语言:txt
复制
import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
import { FormControl } from '@angular/forms';

@Directive({
  selector: '[appAsyncValidatorError]'
})
export class AsyncValidatorErrorDirective implements OnInit {
  @Input('appAsyncValidatorError') control: FormControl;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  ngOnInit() {
    this.control.statusChanges.subscribe(status => {
      if (status === 'INVALID' && this.control.errors) {
        this.viewContainer.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainer.clear();
      }
    });
  }
}

在上面的示例中,我们创建了一个名为appAsyncValidatorError的自定义指令。它接受一个FormControl作为输入,并在FormControl的状态发生变化时订阅状态变化。如果FormControl的状态为INVALID且存在错误,则显示错误消息。

要在模板中使用该自定义指令,可以按照以下步骤进行操作:

  1. 在组件的模板中,使用ng-template指令定义一个模板块,用于显示异步验证器的错误消息:
代码语言:txt
复制
<ng-template #errorTemplate>
  <div class="error-message">异步验证器错误消息</div>
</ng-template>
  1. 在需要显示异步验证器错误的地方,使用自定义指令并将FormControl作为输入传递给它:
代码语言:txt
复制
<div [appAsyncValidatorError]="myFormControl" *ngIf="myFormControl.pending">
  <ng-container *ngTemplateOutlet="errorTemplate"></ng-container>
</div>

在上面的示例中,我们使用*ngIf来检查FormControl的状态是否为pending,以确保异步验证器的错误消息只在异步验证器正在执行时显示。

需要注意的是,上述示例中的代码仅用于演示目的,实际使用时可能需要根据具体需求进行调整。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。详情请参考:腾讯云云服务器
  • 腾讯云云数据库MySQL版:提供高性能、可扩展的云数据库服务,适用于各种规模的应用程序和数据存储需求。详情请参考:腾讯云云数据库MySQL版
  • 腾讯云对象存储(COS):提供安全可靠、高扩展性的云存储服务,适用于存储和管理各种类型的数据。详情请参考:腾讯云对象存储

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

,从而生成错误信息列表 进行用户输入数据有效性验证时,控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板获取到指定控件状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...同模板驱动表单数据有效性验证相同,响应式表单同样可以使用原生表单验证设定规则时,需要将模板控件名对应数据值第二个参数改为验证规则 响应式表单,数据源来源于组件类,因此应该在组件类中直接把验证函数添加到对应...模板驱动表单,因为不是直接使用 FormControl 实例,因此这里应该在模板上添加一个自定义指令来完成对于控件数据校验 使用 angular cli 创建一个用来进行表单验证指令 ng...g directive direactives/hero-validate 创建完成指令之后,我们需要将这个指令将该验证添加到已经存在验证集合,同时为了使这个指令可以与 angular 表单集成在一起...ngOnInit(): void { } } 针对多个字段进行交叉验证时,模板页面,则需要通过获取整个表单错误对象信息来获取到交叉验证错误信息 <div class="form-group

18.9K20

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板控件绑定到Angular组件属性来显示数据。 在这个页面,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地列表下方显示一条消息。...> ''', Angular会自动从组件抽取title和myHero属性值,并将这些值插入到浏览。...当这些属性改变时,Angular会更新显示。 更准确地说,重新显示与视图相关某种异步事件之后发生,例如按键,计时完成或对HTTP请求响应。...模板中使用任何Angular指令之前,您需要将它们列组件@Component注解指令参数。... 不要忘记* ngIf星号(*)。 这是语法重要组成部分。 “模板语法”页面的ngIf部分阅读有关ngIf和*更多信息。

5.3K10

ng-content 隐藏内容

如果你尝试 Angular 编写可重复使用组件,则可能会接触到内容投射概念。然后你发现了 ,并找到了一些关于它文章,进而实现了所需功能。...由于许多问题与Angular 组件生命周期相关,因此我们主要组件将显示一个计数,用于展示它已被实例化次数: import { Component } from '@angular/core';...有时你只需要将其包装在额外容器即可应用 ngIf 或 ngSwitch。无论什么原因,通常情况下,你内部组件不是包装直接子节点。...我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令外层容器添加 ngIf 指令: import { Component } from '@angular/core';...The solution 为了让包装能够控制其子元素实例化,我们可以通过两种方式完成:我们内容周围使用 元素,或者使用带有 “*” 语法结构指令。

2.7K30

angular知识点梳理第二篇-基本语法

angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vuev-model效果是一致,只是写法会有一些区别,vue是可以直接进行使用...,但是angular我们引入框架一个核心模块FormsModule才可以,该指令就是将数据驱动视图改变!...app.modules.ts引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据双向绑定 import...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和cssdisplay:none效果是一致,和visibility...状态 当前isShow:{{isShow}} 是一个div块 运行效果 true显示

2.5K30

AngularDart 4.0 高级-结构指令 顶

三种常见内置结构指令 - NgIf,NgFor和NgSwitch ... - 模板语法指南中进行了描述,并在整个Angular文档示例中进行了介绍。... ngIf指令不会隐藏CSS元素。 它从DOM物理添加和删除它们。 使用浏览开发人员工具确认事实,以检查DOM。 ? 顶部段落在DOM。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以模板单个实例引用。...浏览不会在显示。 模板来解决 Angular 是一个分组元素,不会干扰样式或布局,因为Angular不会将其放入DOM。...满足Angular模板类似需求。 编写一个结构指令 本节,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf条件为true时显示模板内容。

16K20

Angular 显示英雄列表

打开浏览开发者工具,它控制台中显示出如下错误信息: HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined...英雄们显示列表,并且所点英雄详情也显示了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4.4K70

AngularDart4.0 指南- 模板语法二 顶

如果名称未能匹配已知指令元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 事件绑定Angular为目标事件设置了一个事件处理程序。...警惕隐藏大型组件树; NgIf可能是更安全选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。...下一个示例捕获名为i变量索引,并使用像这样英雄名称来显示它。...更糟是,整个视图消失。 如果hero属性不能为空,这将是合理行为。 如果它永远不能为空,但它是空,这是一个应该被捕获和修复编程错误。 抛出异常是正确。...显示是空白,但应用程序保持滚动没有错误。 The null hero's name is {{nullHero?.

29.9K20

AngularDart4.0 英雄之旅-教程-04明细 顶

Angular指令,需要在组件@Component注解指令参数列出。...Angular无法显示null selectedHero属性并抛出以下错误浏览控制台中可见: EXCEPTION: TypeError: Cannot read property 'name...刷新浏览,该应用程序不再失败,名称列表再次显示浏览。 当没有选定英雄时,ngIf指令从DOM移除英雄详情HTML。 没有英雄细节元素或绑定担心。...结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示列表下方时,很难列表识别选定英雄。...您将Hero类移到lib / src下自己文件。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor。

3K30

Angular 显示英雄列表

打开浏览开发者工具,它控制台中显示出如下错误信息: HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined...英雄们显示列表,并且所点英雄详情也显示了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4K30

AngularDart4.0 英雄之旅-教程-05多组件 顶

从哪里开始 开始使用本页面之前,请确认您之前“Tour of Heroes”拥有以下结构。 如果没有,请返回前面的页面。 ?...@Component注解提供组件Angular元数据。 CSS选择名称hero-detail将与父组件模板中标识该组件元素标签相匹配。...如果您在浏览开发工具控制台中查找错误。 没有错误。 就好像Angular忽略了新标签。 那是因为它忽略了新标签。 指令列表 浏览会忽略不能识别的HTML标签和属性。...就像您为内建Angular指令所做那样,通过将其列元数据指令列表,告诉Angular关于英雄详细信息组件。...前方路 “The Tour of Heroes ”游戏应用程序可以更多地使用共享组件,但其(模拟)数据仍然是AppComponent硬编码。 这是不可持续

1.7K10

Angular 快速学习笔记(1) -- 官方示例要点

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰添加元数据形式 providedIn: 'root', 当你顶层提供该服务时,Angular...添加路由 ,路由定义 会告诉路由,当用户点击某个链接或者浏览地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览地址栏 URL 字符串...要使用路由,必须首先初始化路由,并让它开始监听浏览地址变化 b....return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理会汇报一个用户友好消息,并给应用返回一个安全值,让它继续工作,可以使用...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

3.6K50

Angular 快速学习笔记(1) -- 官方示例要点

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰添加元数据形式 providedIn: 'root', 当你顶层提供该服务时,Angular...添加路由 ,路由定义 会告诉路由,当用户点击某个链接或者浏览地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览地址栏 URL 字符串...要使用路由,必须首先初始化路由,并让它开始监听浏览地址变化 b....return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理会汇报一个用户友好消息,并给应用返回一个安全值,让它继续工作,可以使用...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

3.6K00

国庆节前端技术栈充实计划(8):使用 AngularJS 和 ReactJS 经验

当我开始写第一行 Angular 代码时候,就真心诅咒它。这就是所谓:如果你爱 React,那你就恨 Angular不能自欺欺人,一开始,Angular 代码一点也不开心。...当我表单遇到一个由于 ngIf directive 创建一个新子域而导致问题时,我处理起来还是很费劲。...还有当我想要从一个准备发送给服务 JSON 移除一些空白字段时,发现 UI 对应数据也被一并移除了 —— 丫双向绑定 ╮(╯▽╰)╭。...还有当我想要使用 ngShow 和 ngHide 来显示一个 HTML 块同时隐藏另一个 HTML 块时,一瞬间,两者同时显示了。...另一个无法吐槽好东西是:内建表单控制,它为 input 字段提供了默认格式化、解析和校验,而且还提供了一个很好插件用来展示错误信息。

1.4K30

浅谈Angular

Angular数据绑定: 1.插值表达式 {{}}--括号里可填表达式,不能填语句!...来控制元素显隐 自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入值,需要使用@Input装饰\....可以给@Input装饰内部填写一个元数据,这个值是外部使用名字 内部还是使用原来名字 3.如果想要给指令添加元素绑定事件,需要使用@HostListener装饰 如果要通过指令控制DOM显隐...从Observable中文名:”可观察”就能看出,Observable作用是可以起到类似监听作用,但它监听往往都是跨页面, 6.组件间通信: 1.父向子 -- @Input装饰声明输入属性...,要声明子组件里 2.子向父 -- @Output装饰声明事件,要声明子组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 事件,当前操作那个元素就是事件源。

4.4K10
领券