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