td-动力形式

API 总结

投入

• 元素: ITdDynamicElementConfig []
  • JS Object 将视其配置来制作元素.
  • 需要[名 财产.

属性( 只读)

• 窗体: 窗体组
  • 动态的 Getter 属性 [FormGroup].
• 无效:布尔
  • 动态 [FormGroup] 的 Getter 属性 .
• 值: 任意
  • 动态 [FormGroup] 的 [value] 属性.
• 错误 : {[名称:字符串]: 任何}
  • 动态 [FormGroup] 的 [errors] 获取属性 .
• 控件 : {[键:字符串]: 抽象控制}
  • 动态 [FormGroup] 的 [控 的获取属性 .

方法

• 刷新: 函数
  • 刷新窗体并重新提交所有验证符/元素修改

设置

在您的 NgModule 中导入 [covalentDynamicFormsModule] :

import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
@NgModule({
  imports: [
    CovalentDynamicFormsModule,
    ...
  ],
  ...
})
export class MyModule {}

使用量

td-dynamic-forms 元素动态生成窗体

传递一组执行 [ITdDynamicElementConfig] 的javascript对象,其信息要提供给[元素]属性.

// Property values to be set in custom component
export interface ITdDynamicElementCustomConfig {
  [name: string]: any;
}

export interface ITdDynamicElementConfig {
  label?: string;
  name: string;
  hint?: string;
  type: TdDynamicType | TdDynamicElement | Type<any>;
  required = false;
  disabled?: boolean;
  min?: any;
  max?: any;
  minLength?: any;
  maxLength?: any;
  selections?: string[] | { value: any; label: string }[];
  multiple?: boolean;
  default?: any;
  flex?: number;
  validators?: ITdDynamicElementValidator[];
  customConfig?: ITdDynamicElementCustomConfig;
}

注:对于自定义类型,需要执行 [control] 财产,并用在你的基本元素.

HTML 使用示例 :

<td-dynamic-forms [elements]="elements">
  <ng-template let-element ngFor [ngForOf]="elements">
    <ng-template let-control="control" [tdDynamicFormsError]="element.name">
      <span *ngIf="control.touched || !control.pristine">
        <span *ngIf="control.hasError('required')">Required</span>
        <span *ngIf="control.hasError('min')">Min value: {{element.min}}</span>
        <span *ngIf="control.hasError('max')">Max value: {{element.max}}</span>
        <span *ngIf="control.hasError('minlength')"
          >Min length value: {{element.minLength}}</span
        >
        <span *ngIf="control.hasError('maxlength')"
          >Max length value: {{element.minLength}}</span
        >
      </span>
    </ng-template>
  </ng-template>
</td-dynamic-forms>

import { ITdDynamicElementConfig, TdDynamicElement, TdDynamicType } from '@covalent/dynamic-forms';
...
/* CUSTOM TYPE */
  template: `<label>{{label}}</label>
              <input [formControl]="control">
              <div *ngIf="errorMessageTemplate && control.errors"
                  class="tc-red-600"
                  [style.font-size.%]="'70'">
                <ng-template
                  [ngTemplateOutlet]="errorMessageTemplate"
                  [ngTemplateOutletContext]="{control: control, errors: control.errors}">
                </ng-template>
              </div>`,
})
export class DynamicCustomComponent {
  /* control property needed to properly bind the underlying element */
  control: FormControl;

  /* map any of the properties you passed in the config */
  label: string;

  /* map the error message template and use it anywhere you need to */
  errorMessageTemplate: TemplateRef<any>;
}
...
})
export class Demo {
  elements: ITdDynamicElementConfig[] = [{
    name: 'input',
    hint: 'hint',
    type: TdDynamicElement.Input,
    required: true,
  }, {
    name: 'textLength',
    label: 'Text Length',
    type: TdDynamicElement.Input,
    minLength: 4,
    maxLength: 12,
  }, {
    name: 'number',
    type: TdDynamicType.Number,
    min: 10,
    max: 80,
  }, {
    name: 'slider',
    label: 'Label',
    type: TdDynamicElement.Slider,
    required: true,
  }, {
    name: 'boolean',
    type: TdDynamicType.Boolean,
    default: false,
    disabled: true,
  }, {
    name: 'select',
    type: TdDynamicElement.Select,
    required: true,
    multiple: false,
    selections: ['A','B','C'],
    default: 'A',
  }, {
    name: 'file-input',
    label: 'Label',
    type: TdDynamicElement.FileInput,
  }, {
    name: 'datepicker',
    label: 'Date',
    type: TdDynamicElement.Datepicker,
  }, {
    name: 'custom',
    label: 'Custom',
    type: DynamicCustomComponent,
    required: true,
  }];
}

注:要使用取枣机,请提供执行 DateAdapter.单击[此处],以了解有关取枣材料的更多信息(https://material.angular.io/ 组件/datepicker/overview#choosing-a-date-执行-和-date-format-s设置(中文(简体) )

运行单元测试

运行 nx test angular-dynamic-forms 执行单元测试.