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.

Showcase
  • Login
User*
Password*
Form Features
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.

Properties
NameTypeDefaultDescriptionOptions
formGroupFormGroupnullBind Angular FormGroup to Truly-UI Form. FormGroup
formSubmitDirectivenullDirective to set what button will be the submit one. Directive
initialFocusElementRefnullUsed to set up the initialization focus, what element initialize focused. ElementRef
messageDialogConfirmationstringnullThe message of the confirmation dialog (used with showConfirmOnChange property). any text
modestringmodalThe form mode that will work modal | inline
primaryKeystringnullProperty that set's the primary key field in the form, disabling the field. any text
showConfirmOnChangebooleanfalseControls if will shows up the confirmation message after the form changes. true | false
submitOnLastFieldbooleanfalseDefines if the form should submit values when enter key is pressed on last field. true | false
textCancelstringCancelCancel button text any string
textConfirmstringOkConfirmation button text any string
Events
NameParametersDescription
submitForm
NgForm Value : Value form
Returns the value form.