AtomFormGridLayout is a special control, which encapsulates general form layout, i.e. display a label and required asterix and error label for erronous data. AtomFormLayout encapsulates every control within a class called AtomFormField, you need not define this type, it is automatically created by AtomFormLayout.
Every children of AtomFormLayout can define, atom-label, atom-required, atom-is-valid, atom-data-type. atom-regex, atom-field-value and atom-field-class.
atom-label | Label will be displayed on left side of form with right aligned by default. |
atom-required | This will setup default validation for field to be required, if set true, either value of element or atom-field-value cannot be empty. |
atom-is-valid | In case when you have multiple required elements in one field, you can use this to bind to a valid expression, or you can use this to bind to custom expression that evaluate to true. |
atom-data-type | If you setup data-type as email, field will be validated for perfect email address. |
atom-regex | If you setup regex, it will be tested against atom-field-value or value of element. |
atom-field-value | If child control does not have value property, then you can bind this to any property of data that will be validated. |
atom-field-visible | You can bind this property to hide/show the field based on some boolean condition |
atom-field-class | CSS class that should be applied to entire Field Row. |
The only difference here is, AtomFormGridLayout spans 100% and can host multiple column rows as shown in the example.
AtomFormGridLayout also manages AtomFormTabControl and lets you create Tab Control inside your form very easily. As shown in the following example.