开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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，请先学习Angular。

02

angular面试题及答案_angular面试

ngAfterContentInit:当把内容投影进组件之后调用，第一次调用ngDocheck()之后调用，只调用一次，只适用于组件

Angular 2 架构（上)

图中的模板 (Templates)是由 Angular 扩展的 HTML 语法组成，组件 (Components)类用来管理这些模板，应用逻辑部分通过服务 (Services)来完成，然后在模块中打包服务与组件，最后通过引导根模块来启动应用。

01

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

AngularJS 是一种流行的 JavaScript 前端框架，旨在简化 Web 应用程序的开发过程。AngularJS 提供了一套强大的功能和工具，其中之一就是模块（Module）系统。模块是 AngularJS 架构中的核心概念之一，它帮助我们将复杂的应用程序分解为可管理的部分，并提供了依赖注入、模块间的通信和代码组织等功能。本文将详细介绍 AngularJS 模块的概念、用法和最佳实践。

03

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

Angular是一个开放源代码的前端Web框架。它是最流行的JavaScript框架之一，主要由Google维护。它提供了一个轻松开发基于Web的应用程序的平台，并使前端开发人员能够管理跨平台应用程序。它集成了强大的功能，例如声明性模板，端到端工具，依赖项注入以及各种其他使开发路径更流畅的最佳实践。

05

Angular 英雄示例教程

这个入门级 app 包含很多数据驱动的应用所需的特性。它需要获取并显示英雄的列表、编辑所选英雄的详情，并且在包含有英雄数据的不同视图之间进行导航。

03

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

AngularDart（我们通常在这个文档中简单地称为Angular）是一个框架，用于在HTML和Dart中构建客户端应用程序。它是作为Angular包发布的，与其他许多Dart包一样，可以通过Pub工具获得。

03

Angular快速学习笔记（2） -- 架构

0. angular 与angular js angular 1.0 google改名为Angular js 新版本的，2.0以上的，继续叫angular，但是除了名字还叫angular，已经是一个全新的开发框架了。 Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身使用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。全新的Angular 是一个用 HTML 和 T

02

前端面试题angular_Vue前端面试题

1，ng-if 跟 ng-show/hide 的区别有哪些？第一点区别是，ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。第二点区别是，ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。这样会导致，在 ng-if 中用基本变量绑定 ng-model，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。

02

AngularDart 4.0 高级-路由概述顶

本指南涵盖路由器的主要功能，通过演示可以实时运行的小应用程序（查看源代码）演示它们。

02

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

文章目录前文回顾基本语法常见指令 NgModel NgFor NgIf Ng-container 管道前文回顾前面已经写了关于angular项目的基本介绍和如何创建一个angular项目，这一篇主要梳理一些angular的基本语法，这样有利于后面我们进行梳理别的知识点做一些铺垫基本语法常见指令 NgModel NgModel就和vue中的v-model的效果是一致的，只是写法会有一些区别，vue中是可以直接进行使用的，但是在angular中我们引入框架的一个核心模块FormsModule才

03

Vue.js快速入门

Vue.js简介 Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。作为前端的三大框架之一（其他两个是Angular、React），Vue得到了大多前端开发者的

09

Vue.js简介

Vue.js简介 Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。作为前端的三大框架之一（其他两个是Angular、React），Vue得到了大多前端开发者的

07

Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目

最近一直在使用阿里的NG-ZORRO（Angular组件库）开发公司后端的管理系统，写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。因此这篇文章主要是对这段时间使用Angular做一些小总结，希望可以帮到有需要的同学。

02

[2024新版15章]前端框架及项目面试－聚焦Vue3、React、Webpack

1、angular是一个由google开发的前端框架，它是一个完整的框架，包括了数据绑定、组件化、路由、依赖注入等功能；

01

如何在 ASP.NET MVC 中集成 AngularJS（1）

介绍当涉及到计算机软件的开发时，我想运用所有的最新技术。例如，前端使用最新的 JavaScript 技术，服务器端使用最新的基于 REST 的 Web API 服务。另外，还有最新的数据库技术、最新的设计模式和技术。当选择最新的软件技术时，有几个因素在起作用，其中包括如何将这些技术整合起来。过去两年中，我最喜欢的一项技术就是设计单页面应用（SPA）的 AngularJS。作为一个微软stack开发者，我也是使用 ASP.NET MVC 平台实现 MVC 设计模式和并进行研究的粉丝，包括它的捆绑和压缩功能

06

10个基于web的JavaScript最优秀的应用程序库和框架

在所有可用于创建web应用程序的语言中，JavaScript可能是最健壮的库和框架选择。事实上，有太多的东西，很难弄清楚该用哪一个，尤其是当你刚刚开始的时候。

02

Angular与MVVM框架

本文作者：IMWeb daihuimi 原文出处：IMWeb社区未经同意，禁止转载本文从新人角度讲一讲对angular中MVVM模式的理解，以及angular特性的源码实现。 MVVM核心

09

Angular2 VS Angular4 深度对比：特性、性能

在Web应用开发领域，Angular被认为是最好的开源JavaScript框架之一。

02

Angular与MVVM框架

本文从新人角度讲一讲对angular中MVVM模式的理解，以及angular特性的源码实现。

02

Angular企业级开发(7)-MVC之控制器

1.MVC中的控制器 AngularJS的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端的REST服务中，就可以开发轻量级AngularJS应用。涉及到多个控制器中使用的业务逻辑，需要放到一个公共的服务中，然后把改服务注入使用到该业务逻辑的控制器中。 2.理解控制器在AngularJS的控制器中，构造函数会有$scope参数。当一个控制器通过ng-controller指令连接到DOM上，Angular将实例化一个新的控制器对象，然后

05

Angularjs基础(三)

AngularJS ng-model 指令　　　　ng-model 指令用于绑定应用程序数据到HTML 控制器（input,select,textarea）的值 ng-model指令　　　　ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。　　　　　　实例：　　　　　　　　

　　　　　　　　　　　　名字：<input ng-model="name">

05

AngularJS入门心得2——何为双向数据绑定

前言：谁说Test工作比较轻松，最近在熟悉几个case，差点没疯。最近又是断断续续的看我的AngularJS，总觉得自己还是没有入门，可能是自己欠前端的东西太多了，看不了几行代码就有几个常用函数不

08

Angular DOM 抽象概述

为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异，统一了 API 接口。如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。

03

AngularDart4.0 英雄之旅-教程-06服务顶

不是一遍又一遍复制和粘贴相同的代码，而是创建一个可重用的数据服务，并将其注入到需要它的组件中。使用单独的服务可使组件保持精简并专注于支持视图，并使用模拟服务对组件进行单元测试变得容易。

01

AngularJS简介

AngularJS是一个JavaScript矿建，他是一个JavaSscript编写的库。可以通过<script>标签添加到HTML页面。

02

Angular学习笔记（一）

Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。 Angular 模块都是一个带有 @NgModule 装饰器的类。 NgModule 是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：

02

AngularJS面试常见问题汇总

脏检查机制。双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。原理就是，Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch ，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时， $digest 循环就会触发，遍历所有的 $watch ，最后更新 dom。

02

AngularDart4.0 英雄之旅-教程-01介绍

码云项目页：https://gitee.com/scooplolwiki/toh-6

02

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

一、验证 angularJS中提供了许多的验证指令，可以轻松的实现验证，只需要在表单元素上添加相应的ng属性，常见的如下所示： <input Type="text" ng-model="" [name

06

达观数据对AngularJS技术的思考与实践

AngularJs诞生于2009年，最初由MiskoHevery和Adam Abrons开发，后来成为Google的项目。AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用数据绑定和依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。（达观数据陈高星）本文主要涵盖：AngularJsMVC模型、$s

[译]探索Angular 1.3 的单次绑定(one -time bindings)

激动人心的时刻到了，Angular 1.3终于发布了，附带了大量的新功能、bug修复、改进当然也有不足。因为这些新的东西，我们想通过一系列的博文详解主要的功能和改进来让新的版本更快的让大家适应。这是“探索Angular 1.3”系列的第一篇，包含了有史以来最重要的功能：单次绑定(one-time binding)。

01

React 教程：React 快速上手指南 [每日前端夜话0x2B]

前端和 JavaScript 是一个奇怪的世界。大量不断推出的新技术的同时，也在被不需要它们的人嘲笑，往往很多人都会这样做。我们有时会对不断涌现的信息、库和讨论感到不知所措，总希望能有一些稳定的东西，就像能让我们可以休整一段时间的避风港。最近 React 似乎有变成 JavaScript 演变海洋中温暖港湾的趋势。

03

AngularDart4.0 高级-组件样式顶

Angular应用程序使用标准CSS进行样式化。这意味着您可以将所有关于CSS样式表，选择器，规则和媒体查询的知识直接应用于Angular应用程序。

02

【ASP.NET Core 基础知识】--MVC框架--Models和数据绑定

Models和数据绑定在ASP.NET Core MVC中扮演着关键的角色，对于构建强大、灵活和可维护的Web应用程序至关重要。这一节我们就来讲一下。

01

Angular系列教程-第四节

1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入：响应式表单和模板驱动表单。两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型，并提供跟踪这些更改的途径

05

【UTP自动化测试平台系列之终章】前端探索之路

UTP自动化测试平台是TMQ的一个联合项目，目的是方便大家更好地开展自动化测试建设工作，减少重复平台建设的成本，提高产品的自动化测试效率。但是随着项目规模与用户需求的不断增多，需要每个开发人员都需要对前后端进行快速迭代，造成了开发人员无法兼顾后端、前端和UI的开发工作，重构之路由此而生。

【AngularJS】 # AngularJS入门

ng-app 指令定义一个 AngularJS 应用程序。若不声明，将直接显示表达式。

06

前端三大主流框架的区别（一）

相同点 1、使用 Virtual DOM，有较高的运行速度 2、提供组件化功能 3、可使用mobx与vuex进行状态管理，响应式、依赖追踪

03

Angular 17 有什么新功能？

Angular 团队最近一直在进行沟通，通过现场活动来展示 Angular v17 的新功能，以及一个名为 angular.dev 的新网站，这将是未来的官方网站。它具有相同的文档，但有一个新的交互式教程，还有一个游乐场，可以在不安装任何东西的情况下尝试 Angular （就像 Vue 或 Svelte 一样）。

03

Angular（06）- 为什么数据变化，绑定的视图就会自动更新了？

这里提一点，前端三大框架（Angular，React，Vue）的数据驱动来更新视图的原理，即 MVVM 的实现。为什么数据发生变化，绑定的视图就会刷新了呢？

01

多种前端框架的优缺点「建议收藏」

Web前端目前现有的UI框架：Element、Bootstrap、JqueryUi、Foundation、Semantic UI、Pure、UIkit Web前端目前现有的JS框架：JQuery、Zepto、VueJS、AngularJS、ReactJS、backbone 、ember

02

AngularDart 4.0 高级-生命周期钩子顶

Angular创建它，渲染它，创建和渲染它的子项，在数据绑定属性发生变化时对其进行检查，并在将它从DOM中删除之前对其进行销毁。

01

【ionic+angularjs】angularjs ui-router路由简介（$urlRouter、$state、$stateProvider、ui-sref....）

之前有写过一篇关于Angular自带的路由：ngRoute。今天来说说Angular的第三方路由：ui-router。那么有人就会问:为什么Angular有了自带的路由，我们还需要用ui-router呢？这里简单明了的说明下ngRoute和ui-router的区别吧，其实也没很大的区别，主要的就是ngRoute针对于单视图，而ui-router可用于多视图（这里说的视图是指在页面内我们可控制的，可变化的区域）。比如：

04

【转载】【ionic+angularjs】angularjs ui-router路由简介

之前有写过一篇关于Angular自带的路由：ngRoute。今天来说说Angular的第三方路由：ui-router。那么有人就会问:为什么Angular有了自带的路由，我们还需要用ui-router呢？这里简单明了的说明下ngRoute和ui-router的区别吧，其实也没很大的区别，主要的就是ngRoute针对于单视图，而ui-router可用于多视图（这里说的视图是指在页面内我们可控制的，可变化的区域）。比如：

07

8分钟为你详解React、Angular、Vue三大框架

当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。

02

Angular2 -- 生命周期钩子

指令和组件的实例有一个生命周期：新建、更新和销毁。每个接口都有唯一的一个钩子方法，它们的名字是由接口名加上 ng前缀构成的。比如，OnInit接口的钩子方法叫做ngOnInit。指令和组件 ngOnInit：当Angular初始化完成数据绑定的输入属性后，用来初始化指令或者组件。 ngOnChanges：当Angular设置了一个被绑定的输入属性后触发。该回调方法会收到一个包含当前值和原值的changes对象。 ngDoCheck：用来检测所有变化（无论是Angular本身能检测还是无法检测的），并作出相应行动。在每次执行“变更检测”时被调用。 ngOnDestory：在Angular销毁指令或组件之前做一些清理工作，比如退订可观察对象和移除事件处理器，以免导致内存泄漏。只适用于组件 ngAfterContentInit：当Angular把外来内容投影进自己的视图之后调用。 ngAfterContentChecked：当Angular检查完那些投影到自己视图中的外来内容的数据绑定之后调用。 ngAfterViewInit：在Angular创建完组件的视图后调用。 ngAfterViewChecked：在Angular检查完组件视图中的绑定后调用。

02

累积分布函数和直方图哪个更好？

我们的大多数统计评估都依赖于累积分布函数 (CDF)。尽管直方图乍一看似乎更直观并且需要较少的解释，但实际上 CDF 提供了几个优点，值得熟悉它。CDF 的主要优点以及我们主要使用它而不是直方图的原因在对两个图的主要解释之后列出如下。

01

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

angular 入坑记录的笔记第三篇，介绍 angular 中表单控件的相关概念，了解如何在 angular 中创建一个表单，以及如何针对表单控件进行数据校验。

02

Angular学习(01)-架构概览

官方的教程，其实已经很详细且易懂，这里再次梳理的目的在于复习和巩固相关知识点，刚开始接触学习 Angular 的还是建议以官网为主。

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭