Angular动态表单生成(五)

时间:2021-08-27 11:17:20

动态表单生成之布局

到上面的篇章为止,我们已经把表单比较完整的生成出来了,也实现了一些验证功能,可以说,我们截止这里,就已经可以满足我们的大部分表单生成需求了~

但是:

目前来说,我们对于表单的布局只能是用一些公用的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>

然后保存后就可以看到效果如下:

Angular动态表单生成(五)

不知道您看到这里是不是已经恍然大悟,知道该怎么设置控件的样式了呢?

如果不明白,可以参考下官方的文档:

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