简化表单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. Linux-USB驱动笔记-Gadget Function驱动

    1.前言 在Linux-USB驱动笔记(四)–USB整体框架中有説到Gadget Function驱动,下面我们来具体看一下. Gadget Function就是指设备的功能,比如作为U盘,需要文件存 ...

  2. Linux 循环设备 loop疑惑

    什么是loop设备? loop设备是一种伪设备,是使用文件来模拟块设备的一种技术,文件模拟成块设备后, 就像一个磁盘或光盘一样使用.在使用之前,一个 loop 设备必须要和一个文件进行连接.这种结合方 ...

  3. 数据库小白看这里,这个Oracle数据库知识图谱你值得拥有(含MySQL、PG图谱)

    2022年前后,墨天轮社区曾陆续推出PostgreSQL知识图谱.MySQL知识图谱,并得到了大家的广泛好评.此后,便有众多朋友对Oracle知识图谱发起不断"催更".经过近期的内 ...

  4. 玩玩虚拟化-KVM

    1.讲在前面(玩这个的心历路程) 最近一段时间想玩一些集群之类的东西,学习搞一下K8s,集群啥的,但是我没有多台服务器,如果购买云服务器成本太高,后来想到了买台台式机弄点虚拟机来玩,于是我就在某鱼上淘 ...

  5. c#传统读取配置文件

    using Microsoft.Extensions.Configuration; using Microsoft.Extensions.Configuration.Json; namespace C ...

  6. jenkins Publish over SSH 的配置与使用

    一.安装Publish over SSH 插件 二.在Configure System 配置Publish over SSH属性 Passphrase:如果私钥设置了密码就是私钥的密码,私钥没设置密码 ...

  7. KubeSphere 社区双周报 | 2023.12.21-2024.01.04

    KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...

  8. 云原生爱好者周刊:Lens 5.0 发布,更炫、更快、更强!

    云原生一周动态要闻: Lens 5.0.0 发布 GitHub 推出 AI 编程工具 GitHub Copilot Kubernetes 发布 2020 年社区年度报告 Weaveworks 推出适用 ...

  9. 如何使用 GoGoCode 一键 Vue2 转换 Vue3

    前言 从今年年初开始,项目开始升级优化,将之前的 Vue2 旧版本整体升级到 Vue3 版本.在重写了几个 Vue 文件后,我发现做的都是一些机械性的工作,效率低且重复性大.于是就试着搜索了一下有没有 ...

  10. Django运行服务报NameError: name ‘os‘ is not defined

    出现Bug: 原因:这里调用了os模块,但是文件头并没引用os模块 解决办法:在settings.py文件头加上: