TemplateForm (Angular)

This guide demonstrates how to use the TemplateForm component.

TemplateForm Properties

For more info about expressions please visit expressions in our documentation.

TemplateForm Events

Important!!! In order for the Submit event to trigger the TemplateForm should contain at least one Button component whose ButtonType property is set to submit.

For more info about event actions please visit event actions in our documentation.

Differences with the Form component

The TemplateForm component allows entirely custom forms. The developer can use other Radzen components (TextBox, DropDown, CheckBox, Label etc.) to create complex forms with custom layout.

Using the TemplateForm

The TemplateForm contains by default only a submit button which can be removed. Input components (TextBox, DropDown et. al) are used to get the user input .

Unbound TemplateForm

Unbound TemplateForm is used when creating new data items. Then the form data is obtained via the Submit event argument. It contains the value of every input component whose Name property is set. Here is an example.

1. Drag-and-drop a TemplateForm component from the Radzen toolbox.
2. Add a Row component above the submit button. Set its bottom margin to 16px to add some vertical spacing. Add two Columns in it. Set the size of the first column to 3 and the size of the second column to 9.
3. Drag-and-drop a TextBox component in the second column. Set the TextBox Name property to ProductName. This textbox will capture the product name of a hypothetical product item. The value will be available as ProductName in the Submit event argument.
4. Drag-and-drop a Label component in the first column. Set its Text property to Product Name and Component to ProductName. This will “link” the label with the textbox created in the previous step - when the user clicks the label the textbox will automatically focus.
5. Drag-and-drop a RequiredValidator component after the textbox. Set its Text property to Product Name is required and Component to ProductName. The required validator will make sure the user enters a ProductName. If she doesn’t the Submit event of the form will not trigger and the Text of the validator will display.
6. Add an event handler for the Submit event. Optionally invoke a data source method that will insert a new entity.

Data-bound TemplateForm

Data-bound TemplateForm is used when updating existing data items or when one needs to specify default values. In this case the input components are data-bound - their Value property is set e.g. ${data.ProductName}.

1. Add a handler of the page Load event and retrieve a data item. Alternatively just set a data item as a property e.g. {ProductName: 'Product Name'}
2. Drag-and-drop a TemplateForm component from the Radzen toolbox.
3. Add a Row component above the submit button. Set its bottom margin to 16px to add some vertical spacing. Add two Columns in it. Set the size of the first column to 3 and the size of the second column to 9.
4. Drag-and-drop a TextBox component in the second column. Set the Value property to ${data.ProductName}. This will data-bind this textbox to the ProductName property of the data item. The textbox displays the initial value of data.ProductName and updates it whenever the user types something in it.
5. Drag-and-drop a Label component in the first column. Set its Text property to Product Name and Component to textbox0. This will “link” the label with the textbox created in the previous step - when the user clicks the label the textbox will automatically focus.
6. Drag-and-drop a RequiredValidator component after the textbox. Set its Text property to Product Name is required and Component to textbox0. The required validator will make sure the user enters a ProductName. If she doesn’t the Submit event of the form will not trigger and the Text of the validator will display.
7. Add an event handler for the Submit event. Optionally invoke a data source method that will insert a new entity or update an existing one.

   Note that in this case we are using the data property we created in the first step instead of the event argument.