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 相关文章推荐
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
js添加事件的通用方法推荐
May 15 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
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
在项目中寻找代码的坏命名
2012/07/14 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
VBScript版代码高亮
2006/06/26 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python使用MD5加密字符串示例
2014/08/22 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python删除某个字符
2018/03/19 Python
python os用法总结
2018/06/08 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
python 求10个数的平均数实例
2019/12/16 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python pymsql模块的使用
2020/09/07 Python
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
各营销点岗位职责范本
2014/03/05 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
春风行动实施方案
2014/03/28 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
中学政教处工作总结
2015/08/13 职场文书