ng-alain表单使用方式详解


Posted in Javascript onJuly 10, 2018

Angular表单

Angular提供两种不同的架构范式表单:模板驱动和响应式表单,官网也简单实现了动态表单范例。

当使用两种不同范式构建一个用户必填性的表单,在使用上有非常大的不同:

模板驱动

@Component({
  template: `
  <form nz-form (ngSubmit)="onSubmit()">
    <nz-form-item>
      <nz-form-label nzRequired nzFor="name">Name</nz-form-label>
      <nz-form-control>
        <input [(ngModel)]="model.name" name="name" id="name" required #name="ngModel">
        <nz-form-explain [hidden]="name.valid || name.pristine">Name is required</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>`
})
export class DemoComponent {
}

响应式

@Component({
  template: `
  <form nz-form [formGroup]="heroForm" (ngSubmit)="onSubmit()">
    <nz-form-item>
      <nz-form-label nzRequired nzFor="name">Name</nz-form-label>
      <nz-form-control>
        <input formControlName="name">
        <nz-form-explain [hidden]="name.valid || name.pristine">Name is required</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>`
})
export class DemoComponent {
  ngOnInit(): void {
    this.heroForm = new FormGroup({
      name: new FormControl('', [Validators.required])
    });
  }
  
  get name() { return this.heroForm.get('name'); }
}

上述示例只提供核心代码

诚如模板驱动和响应式表单的名称一样。模板驱动以HTML编程风格为主,并且由 ngModel 创建表单控件对象及数据模型管理,相比较响应式表单使用更少的代码(虽然看起来是这样)。

假如对测试非常在意,那么毋庸置疑响应式表单更适合你,因为二者的另一个重要区别是响应式表单数据模型及有效性信息都是同步行为,你可以更容易的测试他它们。

ng-alain表单构建方式

当然这一切都跟 ng-alain 并没有任何决定性关联,ng-alain 只是从使用的角度进一步优化二者的使用方式来做改变。

示例中不管是以HTML、还是以编程风格为主,总是需要很多额外的代码来做布局。

方式一:简易HTML模板表单

因此,当你是以HTML模板为主的表单开发,则简易HTML模板表单组件:shf-item 可能会更适合你,若将上述的示例使用 shf-item 来改变将会这样:

@Component({
  template: `
  <form nz-form (ngSubmit)="onSubmit()" shf-wrap>
    <shf-item label="App Key">
      <input [(ngModel)]="model.name" name="name" required #name="ngModel">
      <nz-form-explain [hidden]="name.valid || name.pristine">Name is required</nz-form-explain>
    </shf-item>
  </form>`
})
export class DemoComponent {
}

以之相对于的响应式表单略同,组件单纯只是进一步优化使用方式。

关于错误反馈

错误反馈包含视觉与信息文本两种,上述示例以信息文本为主(嗯,提示必填性真傻)。

视觉效果在ng-zorro-antd里,是将目标元素以红色边框线来表示(因此对于那些没有边框或没有特殊处理的都无法体现)。

建议:除特殊错误文本以外,可以只考虑以视觉效果来反馈错误。

关于校验

Angular 实现了部分HTML5标准常规属性,例如:required、maxlength 等等;而 ng-zorro-antd 的所有数据录入组件都包含了一些额外的数据限定条件,例如:nz-input-number 有效范围(nzMin、nzMax、nzStep)。当然可以进一步归纳业务校验逻辑,例如异步校验手机号码 mobile (可参考RequiredValidator)。

小结

shf-item 是以简化HTML布局开发的组件,自身会维护 ngModel 的状态变化并对目标元素增加 .has-error 样式类名,它始终保持视觉效果的体现。

方式二:动态表单

动态表单 @delon/form 是一个基于 JSON Schema 标准的动态构建表单;它是一个独立的类库,你可以在任何 ng-zorro-antd 项目中使用。

同样以相同的示例,其代码会有趣得多:

@Component({
  template: `<sf [schema]="schema" (formSubmit)="submit($event)"></sf>`
})
export class DemoComponent {
  schema: SFSchema = {
    properties: {
      name: { type: 'string' }
    },
    required: [ 'name' ]
  }
}

动态表单始终以一个JSON对象来构建表单,哪怕该对象来自远程。

@delon/form 内置仅实现 ng-zorro-antd 数据录入组件部分,你依然可以通过自定义小部件 方法实现一套属于自己业务部件库。

数据结构与UI

一个完整的表单元素我们认为应该包含以下若干元素:

ng-alain表单使用方式详解

JSON Schema 重点在于数据结构校验,而对于UI层面可以通过 <sf [ui]="ui"> 来额外增强 UI 渲染,例如:

schema = {
 properties: {
  url: {
   type: 'string',
   title: 'Web Site'
  }
 }
}

一个URL属性,若我们不希望用于添加 https:// 前缀的情况下,就单纯的 JSON Schema 结构是无法表述,而 nz-input 又支持非常丰富的前后缀文本,则我们可以为 ui 定制并增加 https:// 的前缀文本:

ui = {
 $url: {
  addOnBefore: 'https://'
 }
}

ui 本身也是一个 JSON 结构,为了区分 JSON Schema 属性名的对应关系,必须统一对属性名加上 $ 前缀。

小结

动态表单并不是基于 @angular/form 来构建的,但本质是略同,通过 Observable 监听数据流后使用ajv 校验、错误反馈。

总结

总的来说在 ng-alain 里可以采用 Angular 表单和动态表单两种方式,而 Angular 表单又有两种不同的架构范式表单:模板驱动和响应式表单。

前者若单纯使用 ng-zorro-antd 相对于缺少更加简洁的开发方法,shf 只是一个简洁的表现形式。

后者是一种比较可爱又相对通用的方式,因为JSON Schema规范是统一的,不管哪种前端框架都是相通。

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
js实现返回顶部效果
Mar 10 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 #Javascript
React之PureComponent的使用作用
Jul 10 #Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 #Javascript
echarts整合多个类似option的方法实例
Jul 10 #Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 #Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 #Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 #Javascript
You might like
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php排序算法实例分析
2016/10/17 PHP
prototype 学习笔记整理
2009/07/17 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python实现二叉查找树实例代码
2018/02/08 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python适合人工智能的理由和优势
2019/06/28 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
党员身份证明材料
2015/06/19 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Python编程super应用场景及示例解析
2021/10/05 Python