简化表单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. LeetCode 650. 2 Keys Keyboard(只有两个键的键盘)(DP/质因数分解)

    最初在一个记事本上只有一个字符 'A'.你每次可以对这个记事本进行两种操作: Copy All (复制全部) : 你可以复制这个记事本中的所有字符(部分的复制是不允许的). Paste (粘贴) : ...

  2. 腾讯自研Git客户端,助力每个人都可以轻松使用Git

    工具介绍 UGit是一款腾讯自研的Git客户端,为了让每个人都可以轻松使用Git,从而提高开发效率和团队协作的流畅性.支持工蜂MR/CR,工蜂议题管理,另外对于Git的原生特性有着深度支持. 支持的系 ...

  3. 在Vue3中如何实现四种全局状态数据的统一管理?

    四种全局状态数据 在实际开发当中,会遇到四种全局状态数据:异步数据(一般来自服务端).同步数据.同步数据又分为三种:localstorage.cookie.内存.在传统的 Vue3 当中,分别采用不同 ...

  4. 介绍this指向问题

    this是js底层定义的变量,代表了代码的指向环境 a 函数的this是window b 方法的this是调用的对象 c 构造函数和原型对象上的方法的this指向实例化对象 d 箭头函数不会自己创建t ...

  5. C# .netcore NPOI库 实现报表的列自适应删减

    实际需求:业务上的一个需求,数据库表A中的B字段存放的是该条数据的一些标签,标签存在两级[即一级标签和二级标签], 现在要是实现将这些标签统计到报表中,一级标签作为表头,二级标签作为填充值. 由于之前 ...

  6. 云原生爱好者周刊:K8s Security SIG 发布 Kubernetes 策略管理白皮书

    云原生一周动态要闻: Istio 1.13 发布 CNCF 宣布 2021 年云原生调查结果 运行时安全项目 Falco 添加可扩展插件框架 Grafana 8.3.6 发布 开源项目推荐 文章推荐 ...

  7. 容器虚拟化平台 KSV 1.5 发布:部署更便捷,适配更多信创需求!

    报告!我们又迎来了一次重磅更新: 近日,由青云科技打造的轻量化虚拟机管理平台--KSV 容器虚拟化 1.5 版本正式发布! KSV 1.5 好在什么地方?逐个来解释 新增基于模板创建虚拟机.克隆虚拟机 ...

  8. RabbitMQ3.8.16安装延迟队列插件

    安装过程 1:RabbitMQ 延迟插件GitHub 2:各版本地址 如我的MQ版本是3.8.16,那么根据提示下载的版本是: ①:移动插件到RabbitMQ的插件目录下,如我的位置是:/usr/li ...

  9. Oracle 11.2 RAC 添加节点

    软硬件环境:与上一篇文章一致: 集群中增加节点大致分为 4 个步骤: 1. 前期准备阶段:2. 新节点加入集群(安装 GI 软件):3. 新节点安装 DB 软件:4. 给新节点分配实例: 1.前期准备 ...

  10. C语言之输入输出

    标准库 IO 输入输出功能并非C语言的组成部分,ANSI标准定义了相关的库函数 输入输出 <stdio.h> 流stream是与设备关联的数据的源或者目的地. 文本流:由文本行组成的序列 ...