18.-Dynamic-Form

Narik Dynamic Form plays a vital role in Narik. With it you can define data entry forms with metaData easily.

How Use Narik Dynamic Form

For using Narik Dynamic form you need to insert it in your template and config its fields.

Simple example:

    <narik-dynamic-form [model]="currentEntity" [fields]="fields"></narik-dynamic-form>

Complete example:

<narik-dynamic-form
    [layoutGap]="config?.options?.layoutGap || 10"
    [columnsCount]="config?.options?.columnsCount || 1"
    [groupFields]="config?.options?.groupFields"
    [activeTabGuard]="config?.options?.activeTabGuard != false"
    [activeAutoFocus]="config?.options?.activeAutoFocus != false"
    [defaultFocusField]="config?.options?.defaultFocusField"
    [model]="currentEntity"
    [fields]="fields"
  ></narik-dynamic-form>

After using narik-dynamic-form the most important step is configure fields.

Let's take a look at this sample:

"fields": [
          {
            "name": "documentTypeId",
            "title": "documentType",
            "required": true,
            "dataInfo": {
              "dataKey": "DocumentType",
              "dataProviderKey": "remote"
            },
            "fieldType": "autoComplete"
          },
          {
            "name": "title",
            "required": true,
            "fieldType": "text"
          },
          {
            "name": "description",
            "required": true,
            "fieldType": "text"
          },
          {
            "name": "documentDate",
            "title": "date",
            "required": true,
            "fieldType": "date"
          }
        ]

This sample shows that this form has four fields:

• documentTypeId: A Narik AutoComplete field that is required. Its label is “documentType” and Its data comes from the way that specified in “dataInfo” (more information about dataInfo). This field will be bind to the “documentTypeId” field of the model.

• title: A Narik Input field that is required. Its label is “title”. (if “title” is not specified, “name” will be used instead). This field will be bind to the “title” field of the model.

• description: A Narik Input field(with type “textArea”) that is required. Its label is “description”. (if “title” is not specified, “name” will be used instead). This field will be bind to the “description” field of the model.

• documentData: A Narik Date Picker field that is required. Its label is “date”. This field will be bind to the “documentData” field of the model.

Other field attributes

There are three other important attributes for the Field.

1. hideExpr: With this attribute, you can set an expression to hide the field based on your business. for example:

    {
        "name": "staffId",
        "title": "staff",
        "required": true,
        "dataInfo": {
            "dataKey": "Staff",
            "dataProviderKey": "memory"
        },
        "fieldType": "select",
        "hideExpr": "!host.currentEntity || !host.currentEntity.value"
    }

   In this expression, the host is the context of dynamic form. actually, the component that dynamic form it's inside it. (you can change host by setting it on dynamic form host attribute). If the expression would be “True”, the fields will be hidden.

2. disableExpr : With this attribute, you can set an expression to disable the field based on your business. for example:

   {
        "name": "staffId",
        "title": "staff",
        "required": true,
        "dataInfo": {
            "dataKey": "Staff",
            "dataProviderKey": "memory"
        },
        "fieldType": "select",
        "disableExpr": "!host.currentEntity || !host.currentEntity.value"
    }

   In this expression, the host is the context of dynamic form. actually, the component that dynamic form it's inside it. (you can change host by setting it on dynamic form host attribute). If the expression would be “True”, the fields will be disabled.

3. validators: With this attribute you can apply any validation that you want on field.for example:

   {
       "name": "value",
        "title": "value",
        "required": true,
        "fieldType": "number",
        "validators": ["min", "max"]
    }

   validators is an array of string. current validators that Narik supports are:

   email, max, maxLength, min, minLength, pattern, required, requiredTrue, base64, creditCard, date, dateISO, digits, equal, equalTo, gt, gte, json, lt, lte, maxDate, minDate, notEqual, notEqualTo, number, phone, range, rangeLength, url, uuid

4. validatorParams: Some validators need parameters. for example if you add max validator you must specify the max value. with this attribute you pass validators parameters. for example:

    {
            "name": "value",
            "title": "value",
            "required": true,
            "fieldType": "number",
            "validators": ["min", "max"],
            "validatorParams":
                {
                    "min": 25,
                    "max": 100
                }
        }

You should add Error Translations to display errors correctly. for example:

    {
        errors:{
           "min": "The minimum value for {0} is {1}",
           "max": "The maximum value for {0} is {1}",
        }
    }

More information: Localization-Service Translate Items

1. options : Is a free object and their content is dependent on fieldType. for example, if the fieldType is “select” you can send “select” options via the “options” attribute. fro example:

        {
            "name": "newsType",
            "title": "newsType",
            "required": true,
            "dataInfo": {
                "dataKey": "newsTypes",
                "dataProviderKey": "static"
            },
            "fieldType": "select",
            "options": {
                "showToolbar": false
            }
        }

Dynamic Form view options

There are some attributes that determine how fields should be displayed.

• activeTabGuard: If set to “True”, Tab key has a circular mode inside the form.

• activeAutoFocus: If set to “True” when the form is loaded, the first focusable element inside it, will get focus.

• defaultFocusField: If set by “name” of any fields, that field will be focused on load.

• columnsCount: determines that fields should be displayed in how much columns. the default value is one

• groupFields: If set to true, means that fields should be categorized in different groups. for example, if groupFields is “false” and you set “columnsCount” to two, your fields will be displayed in two columns, each field in one cell. (number of rows is dependent on fields count). But if you set “groupFields” to “true”, each group will be in one cell, and fields will be in groups. you can set “options.groupIndex” on the field attributes to specify the group of each field.