ng-alain表單使用方式

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規範是統一的，無論哪一種前端框架都是相通。

（完）