ng-alain表单使用方式

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模板表单

@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里，是将目标元素以红色边框线来表示（因此对于那些没有边框或没有特殊处理的都无法体现）。

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

关于校验

小结

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

方式二：动态表单

同样以相同的示例，其代码会有趣得多：

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

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

数据结构与UI

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

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

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

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

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

小结

总结

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

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

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

（完）