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
一个完整的表单元素我们认为应该包含以下若干元素:
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规范是统一的,不管哪种前端框架都是相通。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
NG-Alain 是一个基于 Antd 中后台前端解决方案,提供更多通用性业务模块,让开发者更加专注于业务。 快速入门 # 确保使用的是最新版本 Angular cling new demo --style lesscd demong add ng-alainng serve 请参考命令行工具了解更多细节。 [vscode] 建议安装 ng-zorro-vscode 和 ng-alain-vsco
本文向大家介绍详解ng-alain动态表单SF表单项设置必填和正则校验,包括了详解ng-alain动态表单SF表单项设置必填和正则校验的使用技巧和注意事项,需要的朋友参考一下 在使用动态表单时对表单项进行非空校验及正则校验。 使用手机号进行校验,示例如下: 动态表单的基本使用:https://ng-alain.com/form/getting-started/zh 基于基本示例,增加手机号必填与正
本文向大家介绍jquery表单插件Autotab使用方法详解,包括了jquery表单插件Autotab使用方法详解的使用技巧和注意事项,需要的朋友参考一下 Autotab也是一款功能专一的表单插件,它提供了自动跳格的功能,当用户输入的字符数一旦超过已定义的最大长度,则会根据事先设置的目标自动跳转到相应元素上,省却了 用户按【Tab】键的麻烦。最典型的应用就是输入IP地址、软件激活码等地方了,我们做
本文向大家介绍全面解析Bootstrap表单使用方法(表单样式),包括了全面解析Bootstrap表单使用方法(表单样式)的使用技巧和注意事项,需要的朋友参考一下 一、基础表单 表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会
本文向大家介绍AngularJS的表单使用详解,包括了AngularJS的表单使用详解的使用技巧和注意事项,需要的朋友参考一下 AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一
本文向大家介绍详解flask表单提交的两种方式,包括了详解flask表单提交的两种方式的使用技巧和注意事项,需要的朋友参考一下 一.通用方式 通用方式就是使用ajax或者$.post来提交。 前端html 将操作绑定 这样通过js来实现提交表单的功能,然后flask后端 通用方式的好处就是在其他框架中也适用。而且也并不复杂。 二.比较正宗的flask方式 前端html: 前端这时候可以不用绑定操作