简化表单HTML模板的高阶组件,并进一步优化了一些细节:

更友好的表单校验状态

自动化响应式布局

自动维护表单 id

它由 se-container 容器(指令)和 se 组件来表示一个表单,一个简单HTML模板表单是这么写的:

se-container 指定表单元素最多分几列展示,最终一行几列由 col 配置结合响应式规则决定

<form nz-form #f="ngForm" se-container="2">
<se label="App Key">
<input type="text" nz-input [(ngModel)]="i.ak" name="ak" required>
</se>
<se label="App Secret">
<input type="text" nz-input [(ngModel)]="i.sk" name="sk" required maxlength="32">
</se>
<se>
<button nz-button nzType="primary" [disabled]="f.invalid">Save</button>
</se>
</form>

同时,会自动处理所有 Angular 内置校验指令,例如:required、maxlength、min、pattern 等,并以红色边框来表示无效值状态。

https://github.com/ng-alain/delon/blob/master/packages/abc/se/index.zh-CN.md

ng-alain: delon/abc/sc 简化容器的更多相关文章

  1. Angular 中后台前端解决方案 - Ng Alain 介绍

    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...

  2. Ng Alain使用 - cli和克隆两种方式

    感觉没啥要写的,但是在查看相关资料的过程中发现不少浮夸的人,可以说是完全不阅读官方文档,操作完全无厘头,,创建了删,配置,再删除,,,扯蛋....., 方式一:CLI(推荐) # 确保使用的是最新版本 ...

  3. Spring容器启动源码解析

    1. 前言 最近搭建的工程都是基于SpringBoot,简化配置的感觉真爽.但有个以前的项目还是用SpringMvc写的,看到满满的配置xml文件,却有一种想去深入了解的冲动.折腾了好几天,决心去写这 ...

  4. Spring容器启动源码分析

    1. 前言 最近搭建的工程都是基于SpringBoot,简化配置的感觉真爽.但有个以前的项目还是用SpringMvc写的,看到满满的配置xml文件,却有一种想去深入了解的冲动.折腾了好几天,决心去写这 ...

  5. 【Networking】容器网络大观 && SDN 资料汇总

    SDNLAB技术分享(十五):容器网络大观   SDNLAB君• 16-06-17 •2957 人围观 编者按:本文系SDNLAB技术分享系列,本次分享来自SDN撕X群(群主:大猫猫)群直播,我们希望 ...

  6. 通过 Linux 容器进行虚拟化

    简单介绍 Linux 容器是一种轻量级"虚拟化"方法,用于在单个控制主机上同一时候执行多个虚拟装置(容器).还有一个可用来描写叙述 Linux 容器所执行的操作的术语是" ...

  7. IOC容器的创建

    一.IOC容器创建方式 Ioc容器的创建时通过ApplicationContext接口的相关实现类进行的. 如上图所示:有三种创建IOC容器的方式. ClassPathXmlApplicationCo ...

  8. 02.Spring Ioc 容器 - 创建

    基本概念 Spring IoC 容器负责 Bean 创建.以及其生命周期的管理等.想要使用 IoC容器的前提是创建该容器. 创建 Spring IoC 容器大致有两种: 在应用程序中创建. 在 WEB ...

  9. 持续优化云原生体验,阿里云在Serverless容器与多云上的探索

    近日,阿里云宣布推出Serverless Kubernetes服务此举意在降低容器技术的使用门槛.简化容器平台运维.并同时发布阿里云服务对Open Service Broker API标准支持,通过一 ...

  10. Docker系列-第五篇Docker容器数据卷

    1.是什么 在生产环境中使用 Docker,往往需要对数据进行持久化,或者需要在多个容器之间进行数据共享,这必然涉及容器的数据管理操作 . 容器中的管理数据主要有两种方式 : 数据卷 ( Data V ...

随机推荐

  1. 【漏洞分析】20240507-SATURN:当闪电贷遇上有缺陷的通缩机制

    背景信息 2024 年 5 月 6 日,SATURN 代币遭受价格操控攻击,损失 15 BNB.攻击发生的原因是由于 SATURN 代币的代币通缩机制设计不合理,使得攻击者可以通过燃烧池子中的 SAT ...

  2. 图书《React.js实战》代码下载

    图书<React.js实战>代码下载链接:https://pan.baidu.com/s/1kep0xsTeSupyr15c3VwmBw 提取码:9pra 这个代码经过图书<Reac ...

  3. kali安装和升级

    实验介绍: kali集成了世界上所有优秀的渗透测试工具 一:在VMware上安装 这里只详细介绍kali在VMware的安装,u盘和物理机上的安装不做详解 在kali官网下载kali镜像iso文件 下 ...

  4. iOS工厂模式使用小结

    一.什么是工厂方法? 正式的解释是:在基类中定义创建对象的一个接口,让子类决定实例化哪个类.工厂方法让一个类的实例化延迟到子类中进行.工厂方法要解决的问题是对象的创建时机,它提供了一种扩展的策略,很好 ...

  5. 你对 Vue.js 的template 编译的理解?

    template 是 ES5 新出的语法 ,template 是不会被页面显示的,但是 vue 中会被翻译成 dom 结构 : template 编译的过程 : parse 解析生成ast 抽象语法树 ...

  6. 云原生周刊:Harbor v2.11 版本发布 | 2024.6.17

    开源项目推荐 Descheduler Descheduler 是一个工具,可用于优化 Kubernetes 集群中 Pod 的部署位置.它可以找到可以移动的 Pod,并将其驱逐,让默认调度器将它们重新 ...

  7. 云原生爱好者周刊:mist.io 开源多云管理平台

    开源项目推荐 Mist Mist 是一个开源的多云管理平台,它提供了跨云和内部基础设施的可观测性,以及生命周期管理能力.同时还提供了一些功能更强大的商业组件. rga rga 是一个类似于 grep ...

  8. 哈希(C语言)

    文章目录 1.数据结构--哈希表 1.1哈希表的工作原理 1.2哈希表的代码实现 2.哈希算法 2.1 哈希算法介绍 2.2C语言实现示例 本文介绍一个常用的算法--哈希算法,哈希算法依赖于哈希表来实 ...

  9. Ubuntu中Conda建立环境和删除环境

    网上说的很全面了,这里我把我遇到的一些问题和解决方案罗列出来,以便未来的学习和了解. 博客的好处就体现出来了,下次你再用这个东西,就直接打开你的博客照抄就行了,不用东搜西搜了,及其方便,这种碎片化的东 ...

  10. RTCP报文解析

    RTCP包的头部结构体定义 struct RTCP_Header { unsigned short rc:5; unsigned short padding:1; unsigned short ver ...