Using Custom Formly Templates

Overview

As part of the project, a few custom formly templates have been created. This will detail what inputs they require and how to add them successfully to a form.

Image Input

Image input allows the user to submit one image to the field. When the form is submitted, the return value for the field will be a JavaScript File object so you will need to filter and extract the relevant information (usually the Base64 Encoded file blob). To add it to your form, insert the following into your form.fields:

"fields": [
  {
    "key": "image",
    "type": "image",
    "templateOptions": {
      "label": "Image",
      "required": false
    }
  }
]

Question Answer Field

The question answer field allows the form to display a non-editable value. This is useful for when you are listing a series of key value pairs about an object without giving the user the ability to change anything. The benefit of this field over a simple disabled input is that the values will not be return in the form submission. To add it to your form, insert the following:

JSON file

{
  "fields": [
    {
      "key": "question",
      "type": "question-answer",
      "templateOptions": {
        "label": "Question"
      }
    }
  ]
}

Angular component

import { fields } from "./edit.json";
fields = fields;
model["question"] = "answer";

Question Answer Action Field

The question answer action field is similar to the question answer field, however it also provides an action button which can be used to affect the field. This is useful for displaying multiple (single action) forms inside one form. Because JSON does not support functions, you must update the field from an angular component to contain its action function. To add it to your form, insert the following:

JSON file

{
  "fields": [
    {
      "key": "question",
      "type": "question-answer-action",
      "templateOptions": {
        "label": "Question"
      }
    }
  ]
}

Angular component

import { fields } from "./edit.json";
fields = fields;
model["question"] = {
  value: "answer",
  action: () => console.log("action")
};

Checkbox Input

Checkbox input is a simple wrapper so inline the checkbox and apply some custom styling. To add it to your form, insert the following:

{
  "fields": [
     {
      "key": "checkbox",
      "type": "checkbox",
      "wrappers": ["form-field-horizontal"],
      "templateOptions": {
        "label": "Checkbox"
      }
    }
  ]
}