ng-alain表单使用方式详解

站长资源 2024/11/24 佚名

2 0 1

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,表单

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“ng-alain表单使用方式详解”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

ng-alain表单使用方式详解

Angular5中提取公共组件之radio list的实例代码

JavaScript基于对象方法实现数组去重及排序操作示例

评论“ng-alain表单使用方式详解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接