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>