如何使用ng-alain表單

今天就跟大家聊聊有關如何使用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 屬性名的對應關系，必須統一對屬性名加上 $ 前綴。

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