Angular動態表單生成（五）

動態表單生成之佈局

到上面的篇章爲止，咱們已經把表單比較完整的生成出來了，也實現了一些驗證功能，能夠說，咱們截止這裏，就已經能夠知足咱們的大部分表單生成需求了~

可是:

目前來講，咱們對於表單的佈局只能是用一些公用的CSS統一控制一下，可是若是說咱們的表單有須要將一些控件須要單獨來點樣式呢？咱們接下來一塊兒看看吧~

理論部分

其實，咱們在<dynamic-kendo-form></dynamic-kendo-form>中，能夠指定一個屬性 [layout]="formLayout"，這玩意兒其實就是用來搞佈局的。

轉到源碼，咱們能夠看到layout的定義以下：

@Input("layout") formLayout: DynamicFormLayout;

從這裏咱們就能夠看出，咱們須要傳遞一個DynamicFormLayout類型的數據過去，DynamicFormLayout的定義以下：

import { DynamicFormControlLayout } from "../model/misc/dynamic-form-control-layout.model";
export declare type DynamicFormLayout = {
    [id: string]: DynamicFormControlLayout;
};
export declare class DynamicFormLayoutService {
    findById(id: string, formLayout: DynamicFormLayout | null): DynamicFormControlLayout | null;
    getClass(layout: DynamicFormControlLayout | null, context: string, place: string): string;
}

他是一個數組，裏面能夠包含多個 Key爲string類型，Value爲DynamicFormControlLayout的字典，其中，Key是控件的Id，而後DynamicFormControlLayout的定義又以下：

export interface DynamicFormControlLayoutConfig {
    container?: string;
    control?: string;
    errors?: string;
    group?: string;
    hint?: string;
    host?: string;
    label?: string;
    option?: string;
    [key: string]: string | undefined;
}
export interface DynamicFormControlLayout {
    element?: DynamicFormControlLayoutConfig;
    grid?: DynamicFormControlLayoutConfig;
    [key: string]: DynamicFormControlLayoutConfig | undefined;
}

其中，DynamicFormControlLayoutConfig 定義了你能夠爲組件的哪些部分添加樣式，其中：

container:外層包裹容器

control:控件自己

errors:錯誤消息

group:DynamicFromGroup

hint:就是hint，貌似是Lable後面能夠添加的一個說明性文字，DynamicFormControl中有這個屬性

host:不清楚~

label:不解釋

option:有option的這類組件，好比select之類的

到這裏，咱們應該就知道該如何定義layout屬性的值了吧~

開始實戰

好，接下來咱們開始開搞~

首先，在kendo-ui.component.ts中定義一個layout對象：

formLayout: DynamicFormLayout = {
    'firstName': {
      element: {
        control: 'jax-control',
        host: 'jax-host',
        container: 'jax-container',
        label: 'jax-label',
        errors: 'jax-error',
        hint: 'jax-hint'
      }
    }
  };

而後在kendo-ui.component.html中爲dynamic-kendo-form綁定layout屬性：

<dynamic-kendo-form [group]="formGroup"
                        [model]="formModel"
                        [layout]="formLayout"
    >
    </dynamic-kendo-form>

而後保存後就能夠看到效果以下：

不知道您看到這裏是否是已經恍然大悟，知道該怎麼設置控件的樣式了呢？

若是不明白，能夠參考下官方的文檔：

https://github.com/udos86/ng-dynamic-forms#form-layouts