ng-alain: delon/abc/sc 简化容器
简化表单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 简化容器的更多相关文章
- Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- Ng Alain使用 - cli和克隆两种方式
感觉没啥要写的,但是在查看相关资料的过程中发现不少浮夸的人,可以说是完全不阅读官方文档,操作完全无厘头,,创建了删,配置,再删除,,,扯蛋....., 方式一:CLI(推荐) # 确保使用的是最新版本 ...
- Spring容器启动源码解析
1. 前言 最近搭建的工程都是基于SpringBoot,简化配置的感觉真爽.但有个以前的项目还是用SpringMvc写的,看到满满的配置xml文件,却有一种想去深入了解的冲动.折腾了好几天,决心去写这 ...
- Spring容器启动源码分析
1. 前言 最近搭建的工程都是基于SpringBoot,简化配置的感觉真爽.但有个以前的项目还是用SpringMvc写的,看到满满的配置xml文件,却有一种想去深入了解的冲动.折腾了好几天,决心去写这 ...
- 【Networking】容器网络大观 && SDN 资料汇总
SDNLAB技术分享(十五):容器网络大观 SDNLAB君• 16-06-17 •2957 人围观 编者按:本文系SDNLAB技术分享系列,本次分享来自SDN撕X群(群主:大猫猫)群直播,我们希望 ...
- 通过 Linux 容器进行虚拟化
简单介绍 Linux 容器是一种轻量级"虚拟化"方法,用于在单个控制主机上同一时候执行多个虚拟装置(容器).还有一个可用来描写叙述 Linux 容器所执行的操作的术语是" ...
- IOC容器的创建
一.IOC容器创建方式 Ioc容器的创建时通过ApplicationContext接口的相关实现类进行的. 如上图所示:有三种创建IOC容器的方式. ClassPathXmlApplicationCo ...
- 02.Spring Ioc 容器 - 创建
基本概念 Spring IoC 容器负责 Bean 创建.以及其生命周期的管理等.想要使用 IoC容器的前提是创建该容器. 创建 Spring IoC 容器大致有两种: 在应用程序中创建. 在 WEB ...
- 持续优化云原生体验,阿里云在Serverless容器与多云上的探索
近日,阿里云宣布推出Serverless Kubernetes服务此举意在降低容器技术的使用门槛.简化容器平台运维.并同时发布阿里云服务对Open Service Broker API标准支持,通过一 ...
- Docker系列-第五篇Docker容器数据卷
1.是什么 在生产环境中使用 Docker,往往需要对数据进行持久化,或者需要在多个容器之间进行数据共享,这必然涉及容器的数据管理操作 . 容器中的管理数据主要有两种方式 : 数据卷 ( Data V ...
随机推荐
- [OI] 指针与迭代器
取地址与解引用 一般来说,我们有一个取地址符 & 可以返回该变量的地址. int main(){ int a; cout<<&a; } 0x6ffe1c 如果我们现在有一个 ...
- 10月《中国数据库行业分析报告》已发布,深度剖析甲骨文大会Oracle技术新趋势
为了帮助大家及时了解中国数据库行业发展现状.梳理当前数据库市场环境和产品生态等情况,从2022年4月起,墨天轮社区行业分析研究团队出品将持续每月为大家推出最新<中国数据库行业分析报告>,持 ...
- vue2基于 vue-cropper插件对图片裁剪
<template> <div id="app"> <div class="model" v-show="model&q ...
- NJU ICS2024 PA 作业心得(二)
NJU ICS2024 PA 作业心得(二) RTFSC问题处理 这部分一定要很仔细很仔细的阅读RISCV的手册,否则后边会吃苦头的. 我们这里从框架的角度对取指之前和执行之后的操作进行一些简要的补充 ...
- 神经网络之卷积篇:详解残差网络(ResNets)(Residual Networks (ResNets))
详解残差网络 ResNets是由残差块(Residual block)构建的,首先解释一下什么是残差块. 这是一个两层神经网络,在\(L\)层进行激活,得到\(a^{\left\lbrack l + ...
- 开源函数计算平台 OpenFunction 保姆级入门教程
OpenFunction 0.6.0 上周已经正式发布了,带来了许多值得注意的功能,包括函数插件.函数的分布式跟踪.控制自动缩放.HTTP 函数触发异步函数等.同时,异步运行时定义也被重构了.核心 A ...
- vue 父子组件之间传值
在vue中父子组件传值是必不可少的,大家必须要学会! 首先父组件向子组件传值: 父组件:比如我们传teacher为index,如果我们传值变量可以使用 : 绑定我们在data中定义的变量. 子组件:为 ...
- vue关于图片参数赋值
解决方法: 加个require()就可以了 <img :src="require('../xxx/images/'+imgsrc+'.png')"/> export d ...
- H5移动端字体自适应(也适用于宽高)
原文地址: https://mp.weixin.qq.com/s/hhmav2sbAgb7w17ipVZiTw 方法一:纯css方法, 精确度高,IOS 和 安卓 字体大小同等比例1.1 以16px为 ...
- 体验国产系统Deepin:很爽
最近开始把之前一直吃亏的旧电脑拿出来再利用了,先还是选择了熟悉的ubuntu系列.安装了Ubuntu 22.04之后,风风火火地把需要的开发环境搭建起来,虽然桌面有些卡顿,但瑕不掩瑜玉.趁着热情又想着 ...