如何使用ng-alain表單

今天就跟大家聊聊有關(guān)如何使用ng-alain表單，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

Angular表單

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

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

模板驅(qū)動

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

上述示例只提供核心代碼

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

假如對測試非常在意，那么毋庸置疑響應(yīng)式表單更適合你，因為二者的另一個重要區(qū)別是響應(yīng)式表單數(shù)據(jù)模型及有效性信息都是同步行為，你可以更容易的測試他它們。

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

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

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

方式一：簡易HTML模板表單

因此，當(dāng)你是以HTML模板為主的表單開發(fā)，則簡易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 {
}

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

關(guān)于錯誤反饋

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

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

建議：除特殊錯誤文本以外，可以只考慮以視覺效果來反饋錯誤。

關(guān)于校驗

Angular 實現(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)然可以進一步歸納業(yè)務(wù)校驗邏輯，例如異步校驗手機號碼 mobile （可參考RequiredValidator）。

小結(jié)

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

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

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

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

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

動態(tài)表單始終以一個JSON對象來構(gòu)建表單，哪怕該對象來自遠程。

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

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

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

JSON Schema 重點在于數(shù)據(jù)結(jié)構(gòu)校驗，而對于UI層面可以通過 <sf [ui]="ui"> 來額外增強 UI 渲染，例如：

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

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

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

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

看完上述內(nèi)容，你們對如何使用ng-alain表單有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。