動態表單生成之布局

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

但是:

目前來說，我們對於表單的布局只能是用一些公用的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

Angular動態表單生成（五）