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链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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
ajax取消挂起请求的处理方法
2013/03/18 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
浅析vue-router中params和query的区别
2019/12/24 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python中tell()方法的使用详解
2015/05/24 Python
单链表反转python实现代码示例
2018/02/08 Python
Python Requests库基本用法示例
2018/08/20 Python
python简单贪吃蛇开发
2019/01/28 Python
Python删除n行后的其他行方法
2019/01/28 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
投标担保书范文
2014/04/02 职场文书
个人承诺书怎么写
2014/05/24 职场文书
运动员获奖感言
2014/08/15 职场文书
投资入股合作协议书
2014/10/28 职场文书
基于Redission的分布式锁实战
2022/08/14 Redis