README

Angular UDF

Angular library to use UDF(User Defined Fields). UDF are for capturing your custom data, these can then be added at the project, task and some business object on our technology solution.

Prerequisites

To use this library you need to have installed angular-material.

Using NPM:

npm i @angular/material @angular/cdk

Using Yarn:

yarn add @angular/material @angular/cdk

If you have angular-cli installed:

ng add @angular/material

If you have any issue with angular-material installation, please refer to getting-started.

Installing

Using NPM:

npm i @9hub/udf-component

Using Yarn:

yarn add @9hub/udf-component

Usage

You need import our module and add to your Angular's main module.

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

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

Use udf-md to show a list of custom fields, in udf Data you receive the array of custom fields according interface UdfFieldDefinition, in udfFormGroup you receive a FormGroup object.

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

Use udf-field-md to handling the layout of custom fields, in field config you receive the udf configuration according the interface UdfFieldDefinition, in udfFormGroup you receive a FormGroup object.

<!-- 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>