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

Angular form在使用ng-zorro的init上不显示错误

是因为ng-zorro的表单验证需要手动触发。在Angular中,ng-zorro的表单验证需要使用FormControl来进行控制。

首先,确保你已经正确引入了ng-zorro的表单模块,并在组件中导入相关的表单模块。

然后,在组件中创建一个FormControl对象,并将其与ng-zorro的表单控件绑定。例如,如果你有一个输入框,可以这样创建FormControl对象:

代码语言:txt
复制
import { FormControl } from '@angular/forms';

// 在组件中创建FormControl对象
public myControl: FormControl = new FormControl();

// 在模板中将FormControl对象与ng-zorro的表单控件绑定
<input nz-input [nzErrorStateMatcher]="matcher" [formControl]="myControl">

// 在组件中创建一个错误匹配器
public matcher = {
  isErrorState: (control: FormControl): boolean => {
    return control.invalid && control.touched;
  }
};

这样,当表单控件的值无效且被触摸时,ng-zorro的表单验证错误信息就会显示出来。

另外,ng-zorro还提供了其他的表单验证功能,如自定义验证器、异步验证等。你可以参考ng-zorro的官方文档来了解更多关于表单验证的内容。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云云数据库MySQL版、腾讯云对象存储(COS)。

腾讯云云服务器(CVM):提供高性能、可扩展的云服务器,适用于各种应用场景。详情请参考:腾讯云云服务器

腾讯云云数据库MySQL版:提供稳定可靠的云数据库服务,支持高可用、备份恢复等功能。详情请参考:腾讯云云数据库MySQL版

腾讯云对象存储(COS):提供安全可靠的云端存储服务,适用于存储、备份、归档等场景。详情请参考:腾讯云对象存储(COS)

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

相关·内容

Angular 结合 NG-ZORRO 快速开发

结合 ng-zorro angular 比较流行 ui 框架有: Angular Material 官方指定 UI 框架 NG-ZORRO,又名 Ant Design of Angular 国内比较流行...如果熟悉 Vue 或者 React 版本 Ant Design,相信你可以无缝链接啊~ 我们重新使用 angular-cli 生成一个项目 ng-zorro。...思路: 先添加页面 user 用户列表页面,使用 ng-zorro 中 table 组件 用户新增和更改页面可以共用同一个页面,使用 ng-zorroform 组件 页面删除功能直接使用弹窗提示...,使用 ng-zorro 中 modal 组件 对 ng-zorro 组件按需引入 调整路由文件 按照思路,我们得 ng-zorro 引入: // app.module.ts import { ReactiveFormsModule...这两个功能是公用一个表单~ 我们 html 中添加: // user-info.component.html <form nz-form [formGroup]="validateForm" class

1.8K10
  • 分享下 Backbone、Vue、Angular、React 项目使用经验

    慢慢,整个知乎便是充满了一些戾气,开始了无尽网络暴力。 于是,我想分享一下之前使用这些 MV* 框架经验。...而除了每一层 View 关系外,还有全局中会对一些 DOM 进行处理。 当你某一层级修改了DOM 时候,我只能祝你好运了。 而在新 MV* 框架里,则可以使用模块化来解决问题。...项目里,采用Angular。 场景三:Angular 实现桌面端与移动应用代码复用 ?...演进 后来,桌面端从 Angular 1.x 迁移(重写一部分)到了 Angular 4.x,旧应用还运行在旧有的 Angular 1.x 代码,而新应用则运行在新系统。...为什么 Angular 选型里失去优势? Angular 1.x 到 Angular 2.x 这段期间里,有大量技术人员因为奥斯本效应而选择了其他框架。

    2.2K60

    Angular17 使用 ngx-formly 动态表单

    -g @angular/cli # 创建为 standalone 类型项目 ng new angular-ngx-formly --standalone=false 安装 NG-ZORRO 组件库...; 使用 Formly 内置验证: 新用户注册表单基础增加输入年龄字段配置,再为每个字段配置 props 增加 required 属性,表示这是一个必填字段,就像新用户注册表单中用户名字段一样...隐藏/显示字段: 如果需要使前面加入的确认密码字段输入密码字段后才显示时就需要使用 expressions.hide 来控制隐藏或显示: { key: 'checkPassword', type...model.password', }, } PS:hide 是框架显示提供属性,props.disabled 是继承自组件属性; 强制显示错误状态: 使用 formState 可以实现字段之间通信...,所以让 formState & expressions.validation.show 共同控制错误状态显示; 首先需要定义一个选项并绑定到 formly-form 组件: signInOptions

    63710

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(新手入门篇)

    前言:   之前一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细介绍了Angular开发环境搭建和项目的创建。...这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用NG-ZORRO UI组件库搭建后台管理框架。...NG-ZORRO介绍: 官网地址:https://ng.ant.design/docs/introduce/zh ng-zorro-antd 是遵循 Ant Design 设计规范 Angular...全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用NG-ZORRO特性: 提炼自企业级中后台产品交互语言和视觉风格。...开箱即用高质量 Angular 组件库,与 Angular 保持同步升级。 使用 TypeScript 构建,提供完整类型定义文件。 支持 OnPush 模式,性能卓越。 数十个国际化语言支持。

    3.5K11

    当nz-checkbox-group多选框组遇上必选校验

    当nz-checkbox-group多选框组遇上必选校验 Angular2 ng-zorro-antd checkbox 今天表单中用到ng-zorro-antd组件多选框nz-checkbox-group...,4、false 选择一个选项后:1、true,2、false,3、oneOption中值+选中value,4、false 从而始终无法触发显示 “通知范围必选” 第一次尝试 最开始尝试是将this.validateForm.value.scopes...刷了n+1遍ng-zorro-antd官方文档表单部分后,“自定义异步校验”中看到这样一句话 : 当使用 响应式表单(Reactive Form) 时, ...nzValidateStatus 会自动从 NgControl 中获取数据,也可以手动指定特定 NgControl组件将表单校>验函数校验过程和异步返回结果显示对应error | validating...(pending) | warning | success状态,具体使用方式建议参照本demo ----- NG-ZORRO表单一节文档 本着死马当活马医心点开里面的dome,仔细看了下,同时实例试了一下

    4.4K20

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

    4 阿里巴巴即将开源 Angular 组件库 NG-ZORRO Zorro 外观设计由 Ant-Design 团队担纲,而且和其它组件库共享了一致风格和动画效果。...Zorro 已经阿里云团队内部使用,无论是组件数量,还是代码质量,包括外观设计,都非常值得大家期待!...对于 Angular 社区来说,这是一个重大消息,Zorro 发布将会进一步提升 Angular 企业应用方面的巨大优势。...能够正常地与 DllReferencePlugin 协同使用,新增了 --config-name 参数以动态指定部分配置参数、提升了 ModuleConcatenationPlugin 错误显示,并且更新了大量项目自身依赖版本...Genie有两个主要使用场景:第一个是创建和提交自定义数据处理任务请求,其次是设置本地环境来开发和测试Genie集群运行新应用程序和任务。

    42910

    uniapp使用echartsH5显示报错问题解决方法

    前言在做uniapp vue3开发echarts图表时候,发现在浏览器上面正常运行,但在微信开发者工具显示报错了,报错如下原因:微信小程序中,使用document.getElementById会报错...,因为小程序运行环境是基于WedView,不同于浏览器环境。...微信小程序中没有直接操作Dom能力,也就是没有document对象和getElementById方法一、使用echarts浏览器运行方法安装echarts vue-echarts库npm i...uCharts高性能跨平台图表库,PC、H5、APP、小程序兼容uCharts官网跨平台引用这里跨平台引用指的是以 uni-app 或者 Taro 为基础框架平台,借助跨平台框架将 uCharts...获取uCharts原生 uCharts 您只需获取 u-charts.js 或 u-charts.min.js 单个文件,页面中引用这个 js 即可开始使用,您可通过以下方式获得 uCharts:通过码云

    20010

    有了ng-zorro-mobile,ionic4如虎添翼

    前端一般会听过阿里Ant Design,而对于angular使用者,大多也听过ng-zorro(Ant Design for AngularPC版),最近一次ng-zorro更新,带来了新开源迷弟...打开ng-zorro-mobile官网,侧边栏很醒目地标示了ionic中使用: ?...ionic中使用ng-zorro-mobile非常简单,先是创建项目,有ionic相关经验对下面几行代码非常熟悉: #全局安装ionic-cli npm install -g ionic #使用ionic-cli...创建项目 ionic start PROJECT-NAME 然后接入ng-zorro-antd-mobile,其中有两种方式: 使用angular-cli只需要以下一句命令即可完成模块初始化配置(前提安装了...angular-cli): ng add ng-zorro-antd-mobile 使用npm,则先安装模块: npm install ng-zorro-antd-mobile --save 然后 app.modules.ts

    2.6K30

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

    表单与表单元素都需要通过name引用,请注意设置name值。获得错误详细参数可以示例中看到。 示例代码: <!...点击价格与名称可以进行排序,排序时显示向上或向下箭头,搜索框中可以输入查询条件过滤数据。验证搜索框中内容只能是字母与数字,不允许输入其它类型字符。...注意,你也能使用$route服务定义一个路由来将控制器附加到DOM。一个常见错误模板再次使用ng-controller定义一个控制器。这将引起控制器被附加和执行两次。...3.1.4、绑定(ngNonBindable) ngNonBindable指令告诉Angular编译或绑定当前DOM元素内容。...这对于要求Angular忽略那些元素中包含Angular指令和绑定情况下很有用。这种情况能让你网站实时显示源码。

    15.4K60

    Angular 项目多国语言设置

    React 和 Vue 项目同理~ 这里我们仅考虑简体中文和美国英文两种语言,使用框架版本为 @angular/core: "~12.1.0" 日常开发中,我们难免会引入第三方 UI 框架,那么这就涉及了第三方...'zh' : 'en'; 设置 UI 框架多国语言 这里 UI 框架我们以 NG-ZORRO 为例,使用版本号为 ^12.1.1。...现在脚手架很聪明,我们生成项目,添加 NG-ZORRO 时候,它会询问我们选择哪种语言。...这里路径也方便我们部署过程中 url 调整,比如添加个前缀 /jimmy/ 。详见 Angular 项目路径添加指定访问前缀。...比如在 title 属性使用 title。 页面中选择 为了方便用户切换语言,我们应该在页面中设置操作。

    2K20

    7-进军 angular1.x 表单和事件、模块

    ,影响美观,可通过以下方法调整: 1.给定初始化信息(ng-init) 2.隐藏空白选项(ng-show="false") 选择一个选项: <select ng-model="myVar...此外,你可以<em>使用</em>模块来为你应用添加自己<em>的</em>指令: AngularJS 实例 div> var app = <em>angular</em>.module...对象<em>的</em>属性有: $pristine 表单是否未被动过 $dirty 表单是否被动过 $valid 表单是否验证通过 $invalid 表单是否验证失败 $error 表单<em>的</em>验证<em>错误</em> 控制器<em>的</em>意义:控制器是分发者...,处理临时数据、对域($scope)进行划分 指令<em>的</em>意义:可以重复<em>使用</em>,可自定义创建,如代码中compare 表单验证<em>的</em>意义:数据真实性、可靠性<em>的</em>保证 问题 验证表单<em>的</em><em>使用</em>数据<em>的</em><em>使用</em>?...<em>使用</em>对象和注意 <em>form</em> 表单<em>的</em> name 属性 注意 required <em>的</em><em>使用</em> $scope 是一个作用域,注意<em>使用</em>范围 完善<em>的</em> MVC 模型我们要把几个曾侧分开

    2.3K20

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    前言:   一篇文章我们讲了如何在创建Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍是如何在创建好后台管理页面框架快速生成NG-ZORRO相关组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...让你快熟构建一个属于自己NG-ZORRO后台管理框架,注意我们前端代码编写全部都是VS Code上面编写。 Angular项目目录介绍(重要): ?...该方法接受当前和一属性值 SimpleChanges 对象 ngOnInit() 之前以及所绑定一个或多个输入属性值发生变化时都会调用。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。

    4K20

    开源项目——5种技术编写7个demo工程

    官网文档+搜索引擎+一点经验解决工作中百分之九十五问题。。 angular_demo 1.项目简介 使用Angular框架和TypeScript编写前端项目。...NG-ZORRO和ng-bootstrap 项目中引入所需要具体组件 html文件中绘制布局,ts文件中编写逻辑 5.技术准备 TS语法 Angular基础知识 组件库文档NG-ZORRO和ng-bootstrap...提高自己生产力,就是让自己更值钱,接下来一年也会朝着专精一门方向发展,除却计算机基础知识学习外,flutter和android提高自己技术深度。争取工作三年之际给自己一个满意答案。...,发送请求,获取数据,更新UI;就是后端和前端某些知识也是可以通用写后台过程中学习SQL知识,端开发本地存储一样适用;面向对象还能在脚本开发中发挥作用。...这两年总是迷茫和换工作中度过,很多自己想做事情都被准备面试耽误了,这份工作无论如何也要做一年多,把自己想做东西,想学知识有条完成,也算对得起自己。

    1.1K00

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

    前言:   最近一直使用阿里NG-ZORROAngular组件库)开发公司后端管理系统,写了一段时间Angular以后发现对于我们.NET后端开发而言真是非常友善。...因此这篇文章主要是对这段时间使用Angular做一些小总结,希望可以帮到有需要同学。...生命周期钩子:https://angular.cn/guide/lifecycle-hooks 当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序特定时刻调用这些生命周期钩子方法:...该方法接受当前和一属性值 SimpleChanges 对象 ngOnInit() 之前以及所绑定一个或多个输入属性值发生变化时都会调用。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。

    2.8K20
    领券