Overview Form Module Name: FormModule
Module Name: FormModule
The HTML form element represents a document section that contains interactive controls for submitting information to a web server. So the truly-ui form approached is the same, but using the power of angular forms.
Intelligence Tabbing
The Form identifies all components that CAN receive focus and create a map for tabbing, even the components are with the [tabindex]
set, the form will respect the tabindex
of the component and will organize the others components based on user's component config.
Angular Reactive Forms Compatibility
The Truly-ui form is compatible with reactive forms of angular, using the same directives used on native elements. see more of reactive forms: https://angular.io/guide/reactive-forms
Smart Form (CRUD)
The expression "Smart Form" is basically the same modal approach, what changes and ends up becoming a form has a functionality to work in the form of CRUD (Create, Read, Update and Delete) and manages to create a form with these actions defined and tasked to execute upon completion.
Form Validation
The Form validations works together with the Angular Validations, can be used as Template Driven
orReactive Forms
Keyboard Navigation
The Form allow users to control tabbing by key Enter
, ArrowUp
and ArrowDown
to navigation through components.
Form Result (Template Driven)
The Form Result is a JSON of values of all components with [ngModel]
in the form. The form gets these values and return to the origin component.
Name | Type | Default | Description | Options |
---|---|---|---|---|
formGroup | FormGroup | null | Bind Angular FormGroup to Truly-UI Form. | FormGroup |
formSubmit | Directive | null | Directive to set what button will be the submit one. | Directive |
initialFocus | ElementRef | null | Used to set up the initialization focus, what element initialize focused. | ElementRef |
messageDialogConfirmation | string | null | The message of the confirmation dialog (used with showConfirmOnChange property). | any text |
mode | string | modal | The form mode that will work | modal | inline |
primaryKey | string | null | Property that set's the primary key field in the form, disabling the field. | any text |
showConfirmOnChange | boolean | false | Controls if will shows up the confirmation message after the form changes. | true | false |
submitOnLastField | boolean | false | Defines if the form should submit values when enter key is pressed on last field. | true | false |
textCancel | string | Cancel | Cancel button text | any string |
textConfirm | string | Ok | Confirmation button text | any string |
Name | Parameters | Description |
---|---|---|
submitForm | NgForm Value : Value form | Returns the value form. |