开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular 6中的依赖验证未在视图中显示

在Angular 6中，依赖验证是一种用于验证表单输入的机制。它允许开发人员定义验证规则，并在用户输入时自动进行验证。当依赖验证失败时，可以在视图中显示相应的错误消息。

依赖验证可以应用于表单控件之间的依赖关系，例如一个输入字段的值依赖于另一个输入字段的值。通过使用Angular的内置验证器或自定义验证器，可以轻松地实现依赖验证。

要在视图中显示依赖验证错误消息，需要在模板中使用Angular的表单指令和错误消息指令。具体步骤如下：

在模板中，使用ngForm指令包裹整个表单，并为每个表单控件添加ngModel指令。例如：

<form #myForm="ngForm">
  <input type="text" name="input1" [(ngModel)]="input1Value" required>
  <input type="text" name="input2" [(ngModel)]="input2Value" required>
</form>

在每个表单控件后面添加一个错误消息容器，并使用ngIf指令来判断是否显示错误消息。例如：

<form #myForm="ngForm">
  <input type="text" name="input1" [(ngModel)]="input1Value" required>
  <div *ngIf="myForm.controls['input1'].errors && myForm.controls['input1'].touched">
    <p class="error-message">输入不能为空</p>
  </div>
  
  <input type="text" name="input2" [(ngModel)]="input2Value" required>
  <div *ngIf="myForm.controls['input2'].errors && myForm.controls['input2'].touched">
    <p class="error-message">输入不能为空</p>
  </div>
</form>

在上面的示例中，当input1或input2的值为空且用户已经触摸过该字段时，将显示相应的错误消息。

对于更复杂的依赖验证，可以使用自定义验证器。自定义验证器是一个函数，它接收控件的值作为参数，并返回一个验证结果对象。可以根据验证结果对象的属性来显示相应的错误消息。

关于Angular 6中的依赖验证的更多信息，可以参考腾讯云的Angular文档：Angular 表单验证

请注意，以上答案仅针对Angular 6中的依赖验证，并不涉及其他云计算品牌商的相关产品。

相关搜索:Angular 5:无法在函数的html视图中显示值 Angular 7:组件中更改的对象未在视图中反射 Angular cdk滚动:更新视图中未显示的数据源 Angular Material reactive表单:显示每个验证器的不同错误消息 Angular4:在视图中显示对象的subProperty Angular未在测试中设置正确的表单验证类使用活动存储上载的图像未在视图中显示反应式表单验证错误未在Angular 5中显示在Angular中显示formControlName的验证消息基于未在文本视图中显示的搜索栏的计算值

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularDart4.0 指南原

指南了解Angular的基础知识，如本地开发的安装，显示数据和接受用户输入，构建简单的表单，将应用程序服务注入到组件中，以及使用Angular的模板语法。...获取依赖关系在WebStorm中：打开新项目。在项目视图中，双击pubspec.yaml。...然后，要查看您的应用程序，请使用浏览器导航到pub serve显示的URL。重新载入应用程式每当您更改应用程序时，请重新加载浏览器窗口。...4.阅读数据显示以查看数据绑定是否在屏幕上放置组件属性值。 5.阅读用户输入，了解如何响应用户启动的DOM事件。 ...6.阅读表单，其中涵盖用户界面中的数据输入和验证。 7.阅读依赖注入，了解如何从小型单用途零件构建大型，可维护的应用程序。

2.7K2 0

Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑

猫眼API 当然是基于这篇古老的文章啦 ==> http://www.jianshu.com/p/9855610eb1d4 因为是2015年的文章，已经时隔2年多，很难确保API仍可使用，所以我亲自进行了抓包...一些坑坑1: 未在 app.module.ts 中导入 HttpClientModule ionic g provider movies 命令执行后并未在 app.module.ts 中自动导入 HttpClientModule...坑3: WKWebView 问题 emmm… 真机调试的时候，Android 端木有问题，显示正常，而 iOS 端啥都不显示，不知道问题出在哪里（我怀疑是 WKWebView 的 CORS 问题，求评论...，我的解决办法是，降回到 UIWebView。...更多 Angular - HttpClient Angular - API - HttpClient Ionic - WKWebView

2.8K1 0

angular面试题及答案_angular面试

ngOninit:初始化指令或组件，在angular第一次显示展示组件的绑定属性后调用，该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用，...此功能用于更改模板上的输出;比如将字符串更改为大写并在模板上显示它。它还可以相应地更改日期格式。...ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件的输入属性之后，初始化指令、组件所以从angular的生命周期看，constructor是执行在先的所以既然ngOnchanges...强大的功能比如动画和事件处理。使用mvc模式。支持双向数据绑定。支持依赖注入， restful service和有效验证。 28. Angular的核心部件有哪些?...ViewChild 用来从模板视图中获取匹配的元素在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素在父组件的

10.8K12 0

JAMA Neurology：视神经炎患者视觉系统的解剖连接及功能网络的改变

组间比较结果显示：既没有视放射也没有胼胝体纤维的完整性受损。然而，在一个完整的后膝状体解剖网络中，伴ON患者的视觉网络内的功能连通性较高。...这样的相关性并未在其他视束段显示，也未在不伴有ON患者及ON患者健侧上显示。 ? 图1 视束DTI追踪结果图视放射：在参与者的图像上追踪视放射纤维(图2A)。...伴ON患者及不伴ON患者组内激活脑区显示在t图（图4A）。使用t检验寻找组间差异，有统计学意义的差异脑区在图中呈现。...这样的相关性未在左侧MT及其他ROI区呈现出来。...来自文末的小尾巴： CIS(也可以被认为是MS早期)的DTI纤维的局部损伤并未呈现出跨突触式的导致远端的纤维损伤，这样的结果与此前的大多研究结果不一致（研究结果是如何就是如何，无需非要验证前人的结果，孰对孰错没有金标准

6582 0

资讯 | 2017中国互联网百强榜单揭晓；微信更换小程序入口

此次腾讯超越阿里巴巴获得榜单头名，BAT连续五年位居前三，乐视直接出局。本次百强榜单的前十名为：腾讯、阿里巴巴、百度、京东、网易、新浪、搜狐、美团点评、携程、360。...对于 Angular 社区来说，这是一个重大的消息，Zorro 的发布将会进一步提升 Angular 在企业应用方面的巨大优势。...能够正常地与 DllReferencePlugin 协同使用，新增了 --config-name 参数以动态指定部分配置参数、提升了 ModuleConcatenationPlugin 的错误显示，并且更新了大量的项目自身依赖版本...该调查显示，企业用户对Node.js的兴趣与日俱增。...Netflix宣布Genie3支持几项新特性，包括对较早的任务执行引擎进行重新设计、增强安全功能、增加依赖关系缓存，同时API也有更新。

4151 0

如何简化 Web 应用程序的开发过程？AngularJS 模块了解一下

[dependencies]：该模块所依赖的其他模块的列表。依赖模块将在当前模块之前被加载和执行。...示例：angular.module('myApp', []);在上述示例中，我们定义了一个名为 'myApp' 的模块，该模块没有任何依赖。3....每个控制器都有自己的作用域（Scope），我们可以在控制器中定义函数和属性，供视图中调用和使用。...controllerName'：控制器的名称，用于在视图中引用该控制器。function($scope)：控制器的构造函数，接收一个 $scope 参数，用于访问和操作作用域。...;});在上述示例中，我们定义了一个名为 'HomeController' 的控制器，并在 $scope 对象中定义了一个 message 属性。该属性将在视图中被绑定和显示。5.

1503 0

Angular 2 架构（下)

数据绑定(Data binding) 数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互，它是管理应用程序里面数值的一种机制。...每种形式都有一个方向——从 DOM 来、到 DOM 去、双向，就像图中的箭头所示意的。插值 : 在 HTML 标签中显示组件值。...在传统的开发模式中，调用者负责管理所有对象的依赖，循环依赖一直是梦魇，而在依赖注入模式中，这个管理权交给了注入器(Injector)，它在软件运行时负责依赖对象的替换，而不是在编译时。...这种控制反转，运行注入的特点即是依赖注入的精华所在。 Angular 能通过查看构造函数的参数类型，来得知组件需要哪些服务。...当所有的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。这就是依赖注入。

2.2K2 0

ElementRef & TemplateRef & ViewContainerRef

} from '@angular/core'; @Component ({ selector:'my-app', template:`...，用于保存客户端的内容机制，该内容在页面渲染时不被加载，但是可以在运行时被javascript解析,详情可以看 Template HTML TemplateRef // @angular/core.../src/linker/template_ref.d.ts // 用于表示内嵌的template模板，能够用于创建内嵌视(EmbeddedViews) export declare abstract.../core'; @Component({ selector: 'my-app', template: ` Welcome to Angular World <...需要注意的是组件视图中的 template 模板元素，经过渲染后会被替换成 comment 元素。 ViewContainerRef：用于表示一个视图容器，可添加一个或多个视图。

1.2K2 0

Angular 2 架构（上)

(Data Binding) 6、指令 (Directives) 7、服务 (Services) 8、依赖注入 (Dependency Injection) 下图展示了每个部分是如何相互工作的：图中的模板...组件是构成 Angular 应用的基础和核心，可用于整个应用程序中。组件知道如何渲染自己及配置依赖注入。组件通过一些由属性和方法组成的 API 与视图交互。...我们可以通过使用模板来定义组件的视图来告诉 Angular 如何显示组件。...templateUrl - 组件 HTML 模板的地址。 directives - 一个数组，包含此模板需要依赖的组件或指令。...providers - 一个数组，包含组件所依赖的服务所需要的依赖注入提供者。 ----

1.4K1 0

【17】进大厂必须掌握的面试题-50个Angular面试

支持验证客户端和服务器之间的通讯便利支持依赖注入具有强大的功能，例如事件处理程序，动画等。...在Angular中，什么是字符串插值？ Angular中的字符串插值是一种特殊的语法，它在双花括号 {{}}中使用模板表达式来显示组件数据。它也称为小胡子语法。...Angular中的过滤器用于格式化表达式的值，以便将其显示给用户。这些过滤器可以添加到模板，指令，控制器或服务中。不仅如此，您还可以创建自己的自定义过滤器。...Angular中的提供程序是什么？提供程序是Angular中的可配置服务。这是对依赖关系注入系统的一条指令，它提供有关获取依赖关系值的方式的信息。...是的，Angular确实支持嵌套控制器的概念。需要以层次方式定义嵌套控制器，以便在视图中使用它。 17.如何区分Angular表达式和JavaScript表达式？

41.1K5 1

Hybrid app（二）----开发主要应用技术

混编APP主要是在Cordova的基础上，加入移动端组件Ionic，因为Ionic是基于Angular.Js编写的，所以，要求页面前端使用Angular.JS取代Jquery。...它还提供了更加复杂的可视化布局示例，例如在下面显示内容的滑出式菜单。...Angular.Js AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。...Angular 遵循软件工程的MVC模式，并鼓励展现，数据，和逻辑组件之间的松耦合。...通过依赖注入（dependencyinjection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。

3.6K1 0

TW洞见〡为什么你的Angular代码很难测试？

Angular推出有好几年的时候了，跟其他的MV*框架相比，它的双向绑定，无须显式声明Model，模块管理，依赖注入等特点都给Web应用开发带来了极大的便利，另外，借助于它众多强大的原生directive...这显示不现实，功能测试很耗时，而且它的创建成本较高，所以通常只用它来覆盖最基本的那部分逻辑，另一方面，功能测试是依赖于流程的，如果你想验证购买页面上的某个前端逻辑，那么你就不得不一路从产品详情页面老老实实点过来...在新的版本里面，我们只处理了业务逻辑，即判断一个邮箱地址是否合法，至于何时触发验证，验证失败或成功之后应该有怎样的样式，我们都统统交给了angular原生directive去处理了。...Angular是高度模块化的，它希望通过这种模块的形式来解决JS代码管理上的混乱，并且使用依赖注入来自动装配，这一点与SpringIOC很像，带来的好处就是你的依赖是可以随意替换的，这就极大的增加了代码的可测试性...你应该已经猜到了第二个问题我会说一说对它的测试，通常来说，如果一个service创建成本较高或是存在外部依赖/请求的话，我们会将这个servicemock掉，通过让mockedservice直接返回我们想要的结果来让我们只关注被验证的业务逻辑

1.5K3 0

前端MVC学习总结（二）——AngularJS验证、过滤器、指令

一、验证 angularJS中提供了许多的验证指令，可以轻松的实现验证，只需要在表单元素上添加相应的ng属性，常见的如下所示：验证...点击价格与名称可以进行排序，排序时显示向上或向下的箭头，在搜索框中可以输入查询条件过滤数据。验证搜索框中的内容只能是字母与数字，不允许输入其它类型的字符。...视图 — 模板(进行数据绑定的HTML)会被呈现到视图中。控制器 — ngController指令声明一个控制器类；该类包含了业务逻辑，在应用后台使用函数和值来操控域中的属性。...这对于要求Angular忽略那些元素中包含Angular指令和绑定的情况下很有用。这种情况能让你的网站实时显示源码。

15.3K6 0

FastAPI框架诞生的缘由（下）

NestJS (and Angular) 这很跟 Python 没有关系，NestJS是一个JavaScript（TypeScript）NodeJS 框架，受Angular 启发。...它具有一个集成的依赖注入系统，同样是受 Angular 启发。像我知道的的其他依赖注入系统一样，它需要预注册，所以，它添加了冗长而重复的代码。...基于这些类型提供验证和生成文档。依赖注入系统。它没有使用像第三方库（如Pydantic）提供数据验证，序列化和文档，它有自己的库。因此，这些数据类型定义将不太容易重用。它需要更多详细的配置。...依赖注入系统需要对依赖项进行预注册，并且将基于已声明的类型解决依赖问题。因此，不可能声明多个组件来提供一个特定的类型。路由在一个单独的地方声明，函数在另一个地方使用，（而不是在函数顶部使用装饰器）。...我从未在完整的项目中使用过它，因为它没有安全性集成，因此，我无法用基于 Flask-apispec 的全栈生成器替换我拥有的所有功能。我在项目积压中创建了添加该功能的请求。

2.3K2 0

中国互联网巨头做汽车？与Tesla、无人驾驶汽车没多大关系

这几天智能电动车翘楚Tesla创始人Elon Musk即将再访中国，在新帅上任之后力图中国市场。看上去，智能汽车又“热”了，一些媒体将这样的趋势解读为“互联网汽车成为BAT的新战场”。...公开报道显示双方合作内容如下：北京汽车将为“乐视超级汽车”提供硬件层面的支持，乐视则将为北京汽车提供“互联网智能汽车”的智能系统、LeUI操作系统、车联网系统。...还有，乐视并无自己的操作系统（乐视TV的OS是基于Android的），LeUI同样是基于Android定制。对于大部分汽车厂而言都可以基于Android Auto定制。...中国互联网巨头进入汽车行业，与Tesla做的事情并不是一回事，并未在一个层面竞争。...终极智能：无人驾驶，云端调度——Google无人驾驶汽车；整车智能：汽车出厂便融入了互联网交互界面和服务，不依赖第三方系统，最为人熟知的莫过于Tesla； OBD智能：借助OBD接口，打破汽车信息壁垒

8136 0

【AngularJS】 # AngularJS入门

控件未失去焦点 ng-valid 验证通过 ng-invalid 验证失败 ng-dirty 值改变的时候 ng-pending 任何为满足 $asyncValidators...表单实例 novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。...AngularJS 输入验证 form的name.input的name....$dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录基本的表单验证实例，novalidate 用于禁用浏览器默认的验证...AngularJS 依赖注入依赖注入（DI）：是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

23.1K6 0

PoC代码已公布，这个VMware auth高危漏洞需尽快修补

该漏洞属于多个 VMware 产品中的一个关键身份验证绕过漏洞，能允许攻击者获得管理员权限。...随着漏洞被修补，Horizon3 安全研究人员在26日发布了针对该漏洞的概念验证 (PoC) 漏洞利用和技术分析。...虽然Shodan 搜索引擎仅显示了有限数量的 VMware 设备受到针对此漏洞的攻击，但仍有一些医疗保健、教育行业和政府组织成为攻击目标的风险正在增加。...尽管 CVE-2022-22972 VMware auth bypass 尚未在野外被利用，但攻击者已能够在这两个漏洞披露的 48 小时内部署了系统后门和植入了挖矿木马。...CNBC称，这是仅次于微软收购动视暴雪，戴尔收购EMC之后的全球第三大科技行业并购。

5372 0

AngularDart4.0 指南-体系结构概述顶

HeroDetailComponent（代码未显示）显示关于特定英雄的详情，这是用户从HeroListComponent提供的列表中选择的英雄。...这是告诉Angular这个组件的构造函数需要HeroService的一种方法，这样它就可以获得显示的英雄列表。 ? @Component中的元数据告诉Angular从哪里获取为组件指定的主要构建块。...Angular通过简单地将应用程序逻辑分解为服务，并通过依赖注入将这些服务提供给组件，从而帮助您遵循这些原则。依赖注入 ? 依赖注入是一种提供一个类的新实例的方法，它需要完整的依赖关系。...大多数依赖是服务。 Angular使用依赖注入来为新组件提供他们需要的服务。 Angular可以通过查看构造函数参数的类型来判断组件需要哪些服务。...但它并不包括你需要知道的一切。以下是其他重要的Angular功能和服务的简短字母顺序列表。 Forms：支持基于HTML验证和脏检查的复杂数据录入方案。

7.9K3 0

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

四、Step by Step 4.1、表单简介用来处理用户的输入，通过从视图中捕获用户的输入事件、验证用户输入的是否满足条件，从而创建出表单模型修改组件中的数据模型，达到获取用户输入数据的功能模板驱动表单...响应式表单建立表单由组件隐式的创建表单控件实例在组件类中进行显示的创建控件实例表单验证指令函数在表单数据发生变更时，模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新，...4.2.3、数据的有效性验证某些时候需要对于用户输入的信息做有效性验证，此时可以在控件上添加上原生的 HTML 表单验证器来设定验证条件，当表单控件的数据发生变化时，angular 会通过指令的方式对数据进行验证...4.3.3、使用 FormBuilder 生成表单控件当控件过多时，通过 FormGroup or FormControl 手动的构建表单控件的方式会很麻烦，因此这里可以通过依赖注入 FormBuilder...在模板驱动表单中，因为不是直接使用的 FormControl 实例，因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K2 0

Angular 13 发布：全面弃用 View Engine

，Angular 在最近的版本中一直支持它。...: true, "path": ".cache", "environment": "all" } } ... } 框架的更改和依赖项更新...可在此处阅读有关可访问性 (a11y) 标准的拉取请求社区贡献动态启用 / 禁用验证器取消导航后恢复 history 其他更新本次版本更新还包括扩展对 Adobe Fonts 的支持等...元素； AngularJS 可以克隆和重复 HTML 元素； AngularJS 可以隐藏和显示 HTML 元素； AngularJS 可以在 HTML 元素”背后”添加代码； AngularJS 支持输入验证...Angular JS 有诸多特性： MVC；模块化与依赖注入；双向数据绑定；指令与 UI 控件。

2.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭