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

AngularDart4.0 指南- 表单

使用跟踪控件状态的特殊CSS类提供视觉反馈。 向用户显示验证错误并启用/禁用表单控件。 使用模板引用变量在HTML元素之间共享信息。 您可以在Plunker运行实例(查看源代码)并从那里下载代码。...模板驱动的形式 您可以通过使用本页描述的特定于表单的指令和技术在Angular模板语法编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...这个表格的三个字段的两个是必需的。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意的风格显示验证错误: ?...提交按钮也被禁用。 没有留下深刻印象? 想一想。 如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性?...对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮引用该变量。 显示Model(可选) 提交表单目前没有视觉效果。 预期的演示。

17.4K30
您找到你想要的搜索结果了吗?
是的
没有找到

Angular17 使用 ngx-formly 动态表单

ngx-formly 是 Angular 应用实现响应式的动态表单框架,不仅支持自动生成表单、易于上手的自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema,还有开箱即用的内置表单主题...: 推荐使用 angular-cli 提供的 ng add 进行安装配置: # 1....; 使用 Formly 内置验证: 在新用户注册表单的基础上增加输入年龄字段的配置,再为每个字段配置的 props 增加 required 属性,表示这是一个必填的字段,就像新用户注册表单中用户名字段一样...[a-zA-Z]{2,}$/, }, }, ], }, } 自定义异步验证实现唯一校验: 通过接口实现手机号在系统唯一使用也是最为常见的一个场景,通过异步验证需要使用使用同步验证函数时的...; 创建自定义 Extensions 自定义扩展可以为实现动态表单提供更加便利的帮助,如在系统通常相同 key 的表单需要对应相同的 label 字段,如果在前期考虑不好的话容易造成后期维护的困难

36710

GitHub 近两万 Star,无需编码,可一键生成前后端代码,这个开源项目有点强!

(控制字段禁用、隐藏) │ ├─部门管理 │ ├─我的部门(二级管理员) │ └─字典管理 │ └─分类字典 │ └─系统公告 │ └─职务管理 │ └─通讯录 │ └─多租户管理 ├─...└─报表组件封装 │ └─字典组件 │ └─下拉多选组件 │ └─选人组件 │ └─选部门组件 │ └─通过部门选人组件 │ └─封装曲线、柱状图、饼状图、折线图等等报表的组件(经过封装,使用简单...) │ └─在线code编辑器 │ └─上传文件组件 │ └─验证码组件 │ └─树列表组件 │ └─表单禁用组件 │ └─等等 │─更多页面模板 │ ├─各种高级表单 │ ├─各种列表效果...└─其他模块 └─更多功能开发。。...Design Of Vue 实现 vue-cropper - 头像裁剪组件 @antv/g2 - Alipay AntV 数据可视化图表 Viser-vue - antv/g2 封装实现 jeecg-boot-angular

1.1K20

jeecg-boot

(父子表)数据模型,增删改查功能自动生成,菜单配置直接使用; 3.代码生成器提供强大模板机制,支持自定义模板风格。...报表组件,编辑器等等 9.查询过滤器:查询功能自动生成,后台动态拼SQL追加查询条件;支持多种匹配方式(全匹配/模糊查询/包含查询/不匹配查询); 10.数据权限(精细化数据权限控制,控制到行级,列表级,表单字段级...,表单挂靠,业务流转 15.多数据源:及其简易的使用方式,在线配置数据源配置,便捷的从其他数据抓取数据; 16.国际化:支持多语言,开发国际化项目非常方便; 17.自定义表单,支持用户自定义表单布局,支持单表...(控制字段禁用、隐藏) │  ├─部门管理 │  └─字典管理 ├─智能化功能 │  ├─代码生成器功能(一键生成前后端代码,生成后无需修改直接用,绝对是后端开发福音) │  ├─代码生成器模板(提供4...其他说明 项目使用的 vue-cli3, 请更新您的 cli 关闭 Eslint (不推荐) 移除 package.json  eslintConfig 整个节点代码 修改 Ant Design 配色

7.6K10

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

一、Overview angular 入坑记录的笔记第三篇,介绍 angular表单控件的相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...将数据值和一些对于用户的行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件的模板,从而完成与用户的交互 4.2.1、模板驱动表单的双向数据绑定 在根模块引入 FormsModule...,在响应式表单同样可以使用原生的表单验证器,在设定规则时,需要将模板控件名对应的数据值的第二个参数改为验证的规则 在响应式表单,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应的...在模板驱动表单,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng...4.4.2、跨字段的交叉验证 有时候需要针对表单的多个控件数据进行交叉验证,此时就需要针对整个 FormGroup 进行验证。

18.9K20

JeecgBoot 2.4.2 积木报表版本发布,基于 Spring Boot 的低代码平台

js增强 主表修改子表无法进入return语句块 issues/I2818V 代码生成器bug反馈 issues/I256ZE online表单生成视图超过2个报错 #2080 前端增加用户模块 密码的校验规则没有生效...popup #2099 Online控件默认值表达式 使用 系统上下文变量 有bug issues/I28TH9 代码生成器 生成的一对多表单关闭modal 后没有重置子表数据 点击新增后 会显示上一次编辑的表单数据...,单表数据模型和一对多(父子表)、树列表等数据模型,增删改查功能自动生成,菜单配置直接使用(前端代码和后端代码都一键生成); 代码生成器提供强大模板机制,支持自定义模板风格。...(控制字段禁用、隐藏) │ ├─部门管理 │ ├─我的部门(二级管理员) │ └─字典管理 │ └─分类字典 │ └─系统公告 │ └─职务管理 │ └─通讯录 │ └─多租户管理 ├─...) │ └─在线code编辑器 │ └─上传文件组件 │ └─验证码组件 │ └─树列表组件 │ └─表单禁用组件 │ └─等等 │─更多页面模板 │ ├─各种高级表单 │ ├─各种列表效果

1.9K30

一款中小企业的进销存管理系统,无需编写任何代码,支持高效开发复杂功能!

├─销售退货入库(自动生成红字销售应收) │ │ ├─盘亏出库 │ │ └─其他出库 │ ├─库存调拨 │ ├─成本调整 │ ├─库存盘点 │ ├─实时库存 │ └─库存报表(开发)...物料、计量单位 │ └─银行账户、币种 ├─系统管理(Jeecg-Boot功能) │ ├─用户管理 │ ├─角色管理 │ ├─菜单管理 │ ├─权限设置(支持按钮权限、数据权限) │ ├─表单权限...(控制字段禁用、隐藏) │ ├─部门管理 │ ├─字典管理 │ ├─系统公告 │ ├─我的组织机构 │ ├─职务管理 │ └─通讯录 ├─消息中心(Jeecg-Boot) │ ├─消息管理...│ └─模板管理 ├─智能化开发支持(Jeecg-Boot) │ ├─代码生成器功能(一键生成前后端代码,生成后无需修改直接用,绝对是后端开发福音) │ ├─代码生成器模板(提供4套模板,分别支持单表和一对多模型...Design Of Vue 实现 vue-cropper - 头像裁剪组件 @antv/g2 - Alipay AntV 数据可视化图表 Viser-vue - antv/g2 封装实现 jeecg-boot-angular

1.1K20

低代码平台,JeecgBoot v3.0版本发布—新里程牌开始,迎接VUE3版本到来

,会遮挡页面 issues/I44F0R oline在线内嵌子表主表与附表,设置扩展参数限制宽度不起作用 #2881 online点击详情,出现id,好难看 #2922 升级2.4.6后Online表单开发无法使用...,仍可以从网关路由到对应的服务 I47DEM 路由网关禁用Demo配置后,系统仍可以通过网关路由到Demo服务。...,单表数据模型和一对多(父子表)、树列表等数据模型,增删改查功能自动生成,菜单配置直接使用(前端代码和后端代码都一键生成); 代码生成器提供强大模板机制,支持自定义模板风格。...(控制字段禁用、隐藏) │ ├─部门管理 │ ├─我的部门(二级管理员) │ └─字典管理 │ └─分类字典 │ └─系统公告 │ └─职务管理 │ └─通讯录 │ └─多租户管理 ├─...) │ └─在线code编辑器 │ └─上传文件组件 │ └─验证码组件 │ └─树列表组件 │ └─表单禁用组件 │ └─等等 │─更多页面模板 │ ├─各种高级表单 │ ├─各种列表效果

1.6K40

基于SpringBoot库存管理系统,附源码!

├─销售退货入库(自动生成红字销售应收) │ │ ├─盘亏出库 │ │ └─其他出库 │ ├─库存调拨 │ ├─成本调整 │ ├─库存盘点 │ ├─实时库存 │ └─库存报表(开发)...物料、计量单位 │ └─银行账户、币种 ├─系统管理(Jeecg-Boot功能) │ ├─用户管理 │ ├─角色管理 │ ├─菜单管理 │ ├─权限设置(支持按钮权限、数据权限) │ ├─表单权限...(控制字段禁用、隐藏) │ ├─部门管理 │ ├─字典管理 │ ├─系统公告 │ ├─我的组织机构 │ ├─职务管理 │ └─通讯录 ├─消息中心(Jeecg-Boot) │ ├─消息管理...│ └─模板管理 ├─智能化开发支持(Jeecg-Boot) │ ├─代码生成器功能(一键生成前后端代码,生成后无需修改直接用,绝对是后端开发福音) │ ├─代码生成器模板(提供4套模板,分别支持单表和一对多模型...Design Of Vue 实现 vue-cropper - 头像裁剪组件 @antv/g2 - Alipay AntV 数据可视化图表 Viser-vue - antv/g2 封装实现 jeecg-boot-angular

2.8K31

SpringBoot库存管理系统,拿来学习真香

├─销售退货入库(自动生成红字销售应收) │ │ ├─盘亏出库 │ │ └─其他出库 │ ├─库存调拨 │ ├─成本调整 │ ├─库存盘点 │ ├─实时库存 │ └─库存报表(开发)...物料、计量单位 │ └─银行账户、币种 ├─系统管理(Jeecg-Boot功能) │ ├─用户管理 │ ├─角色管理 │ ├─菜单管理 │ ├─权限设置(支持按钮权限、数据权限) │ ├─表单权限...(控制字段禁用、隐藏) │ ├─部门管理 │ ├─字典管理 │ ├─系统公告 │ ├─我的组织机构 │ ├─职务管理 │ └─通讯录 ├─消息中心(Jeecg-Boot) │ ├─消息管理...│ └─模板管理 ├─智能化开发支持(Jeecg-Boot) │ ├─代码生成器功能(一键生成前后端代码,生成后无需修改直接用,绝对是后端开发福音) │ ├─代码生成器模板(提供4套模板,分别支持单表和一对多模型...Design Of Vue 实现 vue-cropper - 头像裁剪组件 @antv/g2 - Alipay AntV 数据可视化图表 Viser-vue - antv/g2 封装实现 jeecg-boot-angular

2K31

JeecgBoot 2.4.6 版本发布,基于代码生成器的企业级低代码平台

限制编辑有用 #I3V547 online表单,下拉多选框控件无法查询 #I3N16Y 从2.4.3更新后online表单开发,js增强使用beforeEdit方法,编辑点击无效,删除beforeEdit...#1785 online在线表单新增字段时,焦点不会自动定位到最新行数据 #2511 【online表单开发】新增数据库字段时,顺序可否放在ID的后面,而不是所属部门的后面 #1823 pgsql 数据库...代码生成,配置 之后 取得表是public下面的 #2101 postgresql 模式问题 #2656 数据库改成postgresql后,导入数据库表无法使用 #I3VN62 online表单主从表权限相互影响...(控制字段禁用、隐藏) │ ├─部门管理 │ ├─我的部门(二级管理员) │ └─字典管理 │ └─分类字典 │ └─系统公告 │ └─职务管理 │ └─通讯录 │ └─多租户管理 ├─...) │ └─在线code编辑器 │ └─上传文件组件 │ └─验证码组件 │ └─树列表组件 │ └─表单禁用组件 │ └─等等 │─更多页面模板 │ ├─各种高级表单 │ ├─各种列表效果

1.7K10

PyCharm 2016.3 公开预览版发布

2.PEP 498:格式化字符串文字:对f字符串的基本支持识别其语法,并在其中为大括号括起来的替换字段提供代码完成。...对于具有长值的变量(numpy数组或pandas数据框),可以注意到变量浏览器特殊的新“查看为...”超链接。 单击它可在单独的弹出式视图中查看值: ? 五、Docker Compose集成 ?...添加了一个新的“分支覆盖”选项,默认情况下禁用,但可以在设置(首选项)轻松启用、构建、执行、部署、 覆盖等。...6的解构赋值 与Flow集成 在Node.js APP中使用docker Angular 2的编码协助增强 新的React项目 TypeScript改进 十一、数据库工具改进 在PyCharm 2016.3...PyCharm包含了DataGrip的所有新功能: 数据库驱动程序管理 在表编辑器同时编辑多个字段 批量提交更改 重命名视图 XML提取器 …… 下载地址: Windows Linux Mac OS

5.3K40

Jeecg-Boot 快速开发平台

(父子表)数据模型,增删改查功能自动生成,菜单配置直接使用; 3.代码生成器提供强大模板机制,支持自定义模板风格。...,表单挂靠,业务流转 15.多数据源:及其简易的使用方式,在线配置数据源配置,便捷的从其他数据抓取数据; 16.国际化:支持多语言,开发国际化项目非常方便; 17.表单设计器,支持用户自定义表单布局,支持单表...(控制字段禁用、隐藏) │ ├─部门管理 │ └─字典管理 │ └─树分类字典 │ └─系统公告 │ └─我的组织机构 ├─消息中心 │ ├─消息管理 │ ├─模板管理 ├─智能化功能 │...) │ └─在线code编辑器 │ └─上传文件组件 │ └─验证码组件 │ └─树列表组件 │ └─表单禁用组件 │ └─等等 │─更多页面模板 │ ├─各种高级表单 │ ├─各种列表效果...└─其他模块 └─更多功能开发。。

2.6K20

一款无需写任何代码,即可一键生成前后端代码的开源工具

JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发。...(控制字段禁用、隐藏) │ ├─部门管理 │ ├─我的部门(二级管理员) │ └─字典管理 │ └─分类字典 │ └─系统公告 │ └─职务管理 │ └─通讯录 │ └─多租户管理 ├─...└─报表组件封装 │ └─字典组件 │ └─下拉多选组件 │ └─选人组件 │ └─选部门组件 │ └─通过部门选人组件 │ └─封装曲线、柱状图、饼状图、折线图等等报表的组件(经过封装,使用简单...) │ └─在线code编辑器 │ └─上传文件组件 │ └─验证码组件 │ └─树列表组件 │ └─表单禁用组件 │ └─等等 │─更多页面模板 │ ├─各种高级表单 │ ├─各种列表效果...└─其他模块 └─更多功能开发。。

1.5K70

Angular--Module的使用

NgModule 可以将其组件和一组相关代码(服务)关联起来,形成功能单元。...imports(导入表) —— 其他模块,本NgModule声明的组件需要使用它们的导出类。 providers —— 本模块向全局服务贡献的那些服务的创建器。 这些服务能被本应用的任何部分使用。...@NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。...app 时 CommonModule @angular/common 当你想要使用NgIf 和NgFor时 FormsModule @angular/forms 当要构建模板驱动表单时 ReactiveFormsModule...@angular/forms 当要构建响应式表单时 RouterModule @angular/router 当要使用路由功能,并且你要用到RouterLink, forRoot() 和.forChild

4.9K40

【干货】基于SpringBoot2开发的Activiti引擎流程管理项目脚手架

系统架构成熟高效稳健,极具商业价值,目前有一下模块 后端模块 流程模块 业务表单模块 组织架构模块(目前有两款实现) 独立的鉴权模块 系统管理模块 前端工程 angular版本的管理前端(历史原因所致)...vue版本的表单 vux ui 移动端 iview ui 的pc端门户前端 AgileBPM 特点 AgileBPM 是一个快速开发平台,可以通过代码生成器生成统一规范的界面通用的前后端。...而且难以置信的支持 N层 任意的数据结构可以与任意形式的 json,javabean 进行无缝转换` 业务表单 表单完美的支撑了业务对象的展示,并支持 丰富的前端组件 和 字段级权限控制 ,最重要的是...支持自由扩展 ,就像写原生vue组件一样任性 表单除了支持常见表单控件外,还支持布局设计、函数计算、日期计算、动态级联下拉框、动态查询、自定义对话框等高级控件,可能您对这些插件还不了解、但是他让我们在高级表单交互的应用减少了很多的编码...,表单权限,节点groovy事件扩展脚本,外部子流程,自定义标题等流程功能 其他说明 鄙人是一个深沉内敛的程序员,不善于使用夸张辞藻,但是我相信AgileBPM是一个越用越好用,时不时境遇小惊喜的开发平台

3.6K50

Angular 2 表单(上)

本章节我们将为大家介绍如何使用组件和模板构建一个 Angular 表单。...利用 Angular 模板,我们可以创建各种类型表单,例如:登录表单,联系人表单,商品详情表单等,而且我们也为这些表单字段添加数据校验。 接下来我们一步步来实现表单的功能。...解压后,修改目录名为angular-forms,修改 angular-forms/package.json 文件的 "name": "angular-quickstart" 为 "name": "angular-forms...: number ) { } } 以下代码,标为 public 的为公有字段,alexa 后添加一个问号(?)表示可选字段。...因为模板驱动的表单有它们自己的模块,所以我们得把 FormsModule 添加到本应用的 imports 数组,这样我们才能使用表单

1.5K10

JeecgBoot 2.4 微服务正式版发布,基于SpringBoot的低代码平台

I247X2 控件默认值是“#{sysUserName}”,但是功能测试时控件没有默认值issues/I1QEMS ERP模板界面,如果超时,点击重新登录,无法跳转到登录界面issues/I1PQ0W 在线表单开发数据表的某一字段的默认值设为...bugissues/I1RMJA 加入多租户管理后数据表无法正常更新issues/1640 表单主附表设计issues/1481 配置字段href,跳转页面issues/I1QP0Y excel的数据使用函数计算的列导入报错...访问权限控制 无法使用的问题issues/1740 online表单开发的权限控制使用报错issues/1733 online表单开发权限控制的勾选框没反应issues/1741 找不到jeecg-cloud-module...(控制字段禁用、隐藏) │ ├─部门管理 │ ├─我的部门(二级管理员) │ └─字典管理 │ └─分类字典 │ └─系统公告 │ └─职务管理 │ └─通讯录 │ └─多租户管理 ├─...) │ └─在线code编辑器 │ └─上传文件组件 │ └─验证码组件 │ └─树列表组件 │ └─表单禁用组件 │ └─等等 │─更多页面模板 │ ├─各种高级表单 │ ├─各种列表效果

2.8K50
领券