@9hub/udf-component 中文文档教程

Question

Angular UDF

使用 UDF（用户定义字段）的 Angular 库。 UDF 用于捕获您的自定义数据，然后可以将这些数据添加到我们技术解决方案的项目、任务和一些业务对象中。

Prerequisites

要使用此库，您需要安装 angular-material。

使用 NPM：

npm i @angular/material @angular/cdk

使用 Yarn：

yarn add @angular/material @angular/cdk

如果您安装了 angular-cli：

ng add @angular/material

如果您对 angular-material 安装有任何问题，请参考 入门。

Installing

使用 NPM：

npm i @9hub/udf-component

使用 Yarn：

yarn add @9hub/udf-component

Usage

您需要导入我们的模块并添加到 Angular 的主模块中。

import { UdfModule } from '@9hub/udf-component'

@NgModule({
  imports: [
    ...
    UdfModule
    ...
  ]
})

使用 udf-md 显示自定义字段列表，在 udf Data 中，您根据接口 UdfFieldDefinition 接收自定义字段数组，在 udfFormGroup 中，您接收一个 FormGroup 对象。

<udf-md [udfData]="input-array-definition-interface" [udfFormGroup]="object-FormGrup"></udf-md>

使用udf-field-md来处理自定义字段的布局，在字段配置中，您根据接口UdfFieldDefinition收到udf配置，在udfFormGroup您收到一个 FormGroup 对象。

<!-- ADDRESS SECTION -->
  <mat-card class="card-form" fxFlex="auto">
    <div class="header-text">Address</div>
    <mat-card-content fxLayout="column">
      <!-- LINE 1 INPUT -->
      <udf-field-md [fieldConfig]="AddressLine1" [udfFormGroup]="udfFieldFormGroup" ></udf-field-md>
      <!-- LINE 2 INPUT -->
      <udf-field-md [fieldConfig]="AddressLine2" [udfFormGroup]="udfFieldFormGroup" ></udf-field-md>
      <div fxLayout="row wrap">
        <!-- CITY INPUT -->
        <div fxFlex="50%">
          <udf-field-md [fieldConfig]="City" [udfFormGroup]="udfFieldFormGroup" ></udf-field-md>
        </div>
        <!-- STATE INPUT -->
        <div fxFlex="50%">
          <udf-field-md [fieldConfig]="State" [udfFormGroup]="udfFieldFormGroup" ></udf-field-md>
        </div>
      </div>
      <div fxLayout="row wrap">
         <!-- COUNTRY INPUT -->
         <div fxFlex="50%">
           <udf-field-md [fieldConfig]="Country" [udfFormGroup]="udfFieldFormGroup" ></udf-field-md>
         </div>
        <!-- POSTCODE INPUT -->
        <div fxFlex="50%">
          <udf-field-md [fieldConfig]="PostCode" [udfFormGroup]="udfFieldFormGroup" ></udf-field-md>
        </div>
      </div>
    </mat-card-content>
  </mat-card>

Built With

• Angular - The web framework used
• Angular Material - Material design components

Contributors

License

该项目已获得 MIT 许可 - 请参阅 LICENSE.md 文件了解详细信息。