Save $100 with our Black Friday deals!

Get $100 OFF with promo code BLACKFRIDAY2024 at checkout until November 30.

Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Form (Angular)

This guide demonstrates how to use the Form component.

Form Properties

Name	Type	Default	Description
Name	string	‘form’ + index suffix	Unique name of the Form.
Data	object	null	Form data.
Visible	boolean/expression	true	Is Form visible.
ButtonPosition	string	bottom	Form buttons position. none, top, bottom or topAndBottom
SubmitText	string	Save	Form Submit button text.
DeleteText	string	Delete	Form Delete button text.
CancelText	string	Cancel	Form Cancel button text.
AllowDelete	boolean	false	Is delete allowed.
UpdateDataOnChange	boolean	false	Should update data immediately after change.
SubmitChangesOnly	boolean	false	Should submit changes only.
Fields	array of FormField	empty	Form fields.
Columns	integer	1	Number of columns for Form fields.
Repeat	string	‘horizontal’	How to repeat Form fields, horizontal or vertical.

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

Auto-generate Form fields from selected schema

Form Events

Name	Type	Default	Description
Submit	event	null	Submit event of the Form. Object with changed property values as event argument.
Delete	event	null	Delete event of the Form. Current object bound to the Form as event argument.
Cancel	event	null	Cancel event of the Form. No event arguments.
Change	event	null	Change event of the Form. The event argument has two properties: `property` - the name of the property that changed and `value` the new value of that property.
LoadData	event	null	Triggered when a popup lookup component needs data - on page, sort and filter with info about the current page, page size, sorted columns and filter expressions in OData v4 format

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

Common FormField Properties

Name	Type	Default	Description
Type	string	string	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.

FormField types

TextFormField

Name	Type	Default	Description
Type	string	text	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.
Rows	integer	2	Number of rows.
Cols	integer	20	Number of columns.

PasswordFormField

Name	Type	Default	Description
Type	string	password	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.

NumberFormField

Name	Type	Default	Description
Type	string	number	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.

IntegerFormField

Name	Type	Default	Description
Type	string	integer	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.

BooleanFormField

Name	Type	Default	Description
Type	string	boolean	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.

DateFormField

Name	Type	Default	Description
Type	string	date	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.
ShowTime	boolean	false	Should show time.

LookupFormField

Name	Type	Default	Description
Type	string	lookup	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
AllowFiltering	boolean	false	Is FormField lookup DropDown filterable.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.
Data	array	empty	Lookup data property.
ValueProperty	string	null	Lookup data value property.
TextProperty	string	null	Lookup data text property.

LookupPopupFormField

Name	Type	Default	Description
Type	string	lookup	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
AllowFiltering	boolean	false	Is FormField lookup DropDown filterable.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.
Data	array	empty	Lookup data property.
ValueProperty	string	null	Lookup data value property.
TextProperty	string	null	Lookup data text property.
AllowFiltering	boolean	true	Is FormField filtering allowed.
AllowSorting	boolean	true	Is FormField sorting allowed.

FileFormField

Name	Type	Default	Description
Type	string	date	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.
Accept	string	image/*	Accepted file types filter.

SelectbarFormField

Name	Type	Default	Description
Type	string	date	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.
Options	array of Name/Value	empty	Selectbar options.

RatingFormField

Name	Type	Default	Description
Type	string	date	FormField type.
Property	string	null	FormField property name.
Required	boolean	false	Is FormField required.
Disabled	boolean	false	Is FormField disabled.
Visible	boolean/expression	true	Is FormField visible.
Title	string	null	FormField title.
DefaultValue	string/expression	null	FormField default value.
Placeholder	string	null	FormField placeholder.
Stars	integer	5	Number of stars.

Angular declaration

<rz-form #form0 [data]="product" [submitChangesOnly]="true" [updateDataOnChange]="false">
  <rz-integer-form-field [disabled]="true" property="Id" [required]="true" title="Id" type="integer">
  </rz-integer-form-field>
  <rz-string-form-field property="ProductName" [required]="false" title="Product Name" type="string">
  </rz-string-form-field>
  <rz-file-form-field property="ProductPicture" [required]="false" title="Product Picture" type="file">
  </rz-file-form-field>
  <rz-number-form-field property="ProductPrice" [required]="false" title="Product Price" type="number">
  </rz-number-form-field>
</rz-form>

Still using Radzen Studio? Achieve more with Radzen Blazor Studio