Angular表單

Angular提供兩種不同的架構(gòu)范式表單：模板驅(qū)動(dòng)和響應(yīng)式表單，官網(wǎng)也簡(jiǎn)單實(shí)現(xiàn)了動(dòng)態(tài)表單范例。

當(dāng)使用兩種不同范式構(gòu)建一個(gè)用戶(hù)必填性的表單，在使用上有非常大的不同：

模板驅(qū)動(dòng)

@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 {
}

響應(yīng)式

@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'); }
}

上述示例只提供核心代碼

誠(chéng)如模板驅(qū)動(dòng)和響應(yīng)式表單的名稱(chēng)一樣。模板驅(qū)動(dòng)以HTML編程風(fēng)格為主，并且由 ngModel 創(chuàng)建表單控件對(duì)象及數(shù)據(jù)模型管理，相比較響應(yīng)式表單使用更少的代碼（雖然看起來(lái)是這樣）。

假如對(duì)測(cè)試非常在意，那么毋庸置疑響應(yīng)式表單更適合你，因?yàn)槎叩牧硪粋€(gè)重要區(qū)別是響應(yīng)式表單數(shù)據(jù)模型及有效性信息都是同步行為，你可以更容易的測(cè)試他它們。

ng-alain表單構(gòu)建方式

當(dāng)然這一切都跟 ng-alain 并沒(méi)有任何決定性關(guān)聯(lián)，ng-alain 只是從使用的角度進(jìn)一步優(yōu)化二者的使用方式來(lái)做改變。

示例中不管是以HTML、還是以編程風(fēng)格為主，總是需要很多額外的代碼來(lái)做布局。

方式一：簡(jiǎn)易HTML模板表單

因此，當(dāng)你是以HTML模板為主的表單開(kāi)發(fā)，則簡(jiǎn)易HTML模板表單組件：shf-item 可能會(huì)更適合你，若將上述的示例使用 shf-item 來(lái)改變將會(huì)這樣：

@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 {
}

以之相對(duì)于的響應(yīng)式表單略同，組件單純只是進(jìn)一步優(yōu)化使用方式。

關(guān)于錯(cuò)誤反饋

錯(cuò)誤反饋包含視覺(jué)與信息文本兩種，上述示例以信息文本為主（嗯，提示必填性真傻）。

視覺(jué)效果在ng-zorro-antd里，是將目標(biāo)元素以紅色邊框線來(lái)表示（因此對(duì)于那些沒(méi)有邊框或沒(méi)有特殊處理的都無(wú)法體現(xiàn)）。

建議：除特殊錯(cuò)誤文本以外，可以只考慮以視覺(jué)效果來(lái)反饋錯(cuò)誤。

關(guān)于校驗(yàn)

Angular 實(shí)現(xiàn)了部分HTML5標(biāo)準(zhǔn)常規(guī)屬性，例如：required、maxlength 等等；而 ng-zorro-antd 的所有數(shù)據(jù)錄入組件都包含了一些額外的數(shù)據(jù)限定條件，例如：nz-input-number 有效范圍（nzMin、nzMax、nzStep）。當(dāng)然可以進(jìn)一步歸納業(yè)務(wù)校驗(yàn)邏輯，例如異步校驗(yàn)手機(jī)號(hào)碼 mobile （可參考RequiredValidator）。

小結(jié)

shf-item 是以簡(jiǎn)化HTML布局開(kāi)發(fā)的組件，自身會(huì)維護(hù) ngModel 的狀態(tài)變化并對(duì)目標(biāo)元素增加 .has-error 樣式類(lèi)名，它始終保持視覺(jué)效果的體現(xiàn)。

方式二：動(dòng)態(tài)表單

動(dòng)態(tài)表單 @delon/form 是一個(gè)基于 JSON Schema 標(biāo)準(zhǔn)的動(dòng)態(tài)構(gòu)建表單；它是一個(gè)獨(dú)立的類(lèi)庫(kù)，你可以在任何 ng-zorro-antd 項(xiàng)目中使用。

同樣以相同的示例，其代碼會(huì)有趣得多：

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

動(dòng)態(tài)表單始終以一個(gè)JSON對(duì)象來(lái)構(gòu)建表單，哪怕該對(duì)象來(lái)自遠(yuǎn)程。

@delon/form 內(nèi)置僅實(shí)現(xiàn) ng-zorro-antd 數(shù)據(jù)錄入組件部分，你依然可以通過(guò)自定義小部件 方法實(shí)現(xiàn)一套屬于自己業(yè)務(wù)部件庫(kù)。

數(shù)據(jù)結(jié)構(gòu)與UI

一個(gè)完整的表單元素我們認(rèn)為應(yīng)該包含以下若干元素：

JSON Schema 重點(diǎn)在于數(shù)據(jù)結(jié)構(gòu)校驗(yàn)，而對(duì)于UI層面可以通過(guò) <sf [ui]="ui"> 來(lái)額外增強(qiáng) UI 渲染，例如：

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

一個(gè)URL屬性，若我們不希望用于添加 https:// 前綴的情況下，就單純的 JSON Schema 結(jié)構(gòu)是無(wú)法表述，而 nz-input 又支持非常豐富的前后綴文本，則我們可以為 ui 定制并增加 https:// 的前綴文本：

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

ui 本身也是一個(gè) JSON 結(jié)構(gòu)，為了區(qū)分 JSON Schema 屬性名的對(duì)應(yīng)關(guān)系，必須統(tǒng)一對(duì)屬性名加上 $ 前綴。

小結(jié)

動(dòng)態(tài)表單并不是基于 @angular/form 來(lái)構(gòu)建的，但本質(zhì)是略同，通過(guò) Observable 監(jiān)聽(tīng)數(shù)據(jù)流后使用ajv 校驗(yàn)、錯(cuò)誤反饋。

總結(jié)

總的來(lái)說(shuō)在 ng-alain 里可以采用 Angular 表單和動(dòng)態(tài)表單兩種方式，而 Angular 表單又有兩種不同的架構(gòu)范式表單：模板驅(qū)動(dòng)和響應(yīng)式表單。

前者若單純使用 ng-zorro-antd 相對(duì)于缺少更加簡(jiǎn)潔的開(kāi)發(fā)方法，shf 只是一個(gè)簡(jiǎn)潔的表現(xiàn)形式。

后者是一種比較可愛(ài)又相對(duì)通用的方式，因?yàn)镴SON Schema規(guī)范是統(tǒng)一的，不管哪種前端框架都是相通。

 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論