Angular PrimeNG Form facilitates the various input components for taking the input field & validating, which helps to design a responsive form for a single-page-application, that enhances the user experience, along with increasing the user interactivity in the Web application.
There are various components that are provided by the Angular PrimeNG Form, which are listed below with their brief description.
AutoComplete Component
The AutoComplete Component in Angular PrimeNG facilitates real-time suggestions while the user is typing in the input component.
Components
Descriptions
Model Driven Forms Component
The Model Driven Forms can be used with the AutoComplete Component, in order to automatically suggest the next word depending upon the context.
It is used to display a button next to the input field where the click behavior of the button is defined using the dropdownMode property that takes “blank” or “current” as possible values.
The Form AutoComplete Objects Component is used to define the label to display as a suggestion with a field attribute. This component helps to make the interactive Form AutoComplete by implementing the different stylings provided by Angular PrimeNG.
It is used to validate the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions.
Animation Configuration Component is used to set the transition time of the animation and the transition of the show and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties.
The AutoComplete Component is an input component that provides real-time suggestions when being typed. It uses ngModel for two-way binding, which requires a list of suggestions and a completeMethod to query for the results.
The Calendar Component is used to input the user’s date and time. By default, the calendar is shown in popup mode but the inline property can be used to display it in inline mode.
The Calendar Component is used to input the user’s date and time. Users can select only one date by default but multiple dates can be selected by setting the selectionMode property to multiple.
The Calendar Component is used to input the user’s date and time. The default date format of the calendar component is “mm/dd/yy”. The dateFormat property is used to customize the date format. The below options can be used as a part of the date format.
The Calendar Component is used to input the user’s date and time. The time picker in a calendar is used to enable the user to pick the time. It can be shown with or without the calendar. The hourFormat property is used to specify the time format to use.
The Calendar Component is used for date and time input from the user. To restrict selectable dates to a range set the readonlyInput property to true so that users cannot enter dates using the keyboard.
The Calendar Component is used for date and time input from the user. To disable specific dates and/or dates first set the readonlyInput to true so that the user cannot enter the dates using the keyboard.
The Calendar component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month. The Button Bar Component can be used to display the buttons for the current date & clear the selected option on the footer section of the calendar by enabling the showButtonBar property.
Angular PrimeNG Form Calendar Multiple Months Component is used to show multiple months calendar at the same time. The number of calendars depends on the number specified in the [numberOfMonths] property.
The Calendar Component is used to input the user’s date and time. Custom content can be added to the calendar by using the header and footer templates provided by the calendar component.
The Calendar Component is used to input the user’s date and time. The Calendar Touch UI mode is optimized for touch devices and can be enabled by setting the touchUI property to true.
The Form Calendar component is used to take input of date and/or time from the user. There are 11 structural styling classes for the calendar component which are listed below.
CascadeSelect Component
The CascadeSelect Component is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select.
Angular PrimeNG Form CascadeSelect Basic is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select.
The CascadeSelect Component is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select.
The CascadeSelect Component is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select.
The Checkbox component provided by PrimeNG is an extension of the HTML checkbox with theming. A checkbox component is generally used to take input of a boolean value.
The Checkbox Component provided by PrimeNG is an extension of the HTML checkbox with theming. A multiple-checkbox component can also be created by specifying the .field-checkbox class
The label property of the checkbox component is used to set the label text for the checkbox. The label of the checkbox is clickable and it toggles the value of the checkbox when clicked.
The Checkbox component provided by PrimeNG is an extension of the HTML checkbox with theming. A boolean variable can be bounded to the checkbox by using the ngModel property and by setting the binary option to true.
Model Driven Forms Component
The model-driven form can be used with the CheckBox Component.
Checkbox Properties Component: It is an extension to the standard checkbox element with theming and properties are used to add some extra features to the component.
The Checkbox Component provided by PrimeNG is an extension of the HTML checkbox with theming and is used to take input of boolean value from the user. There is only one event for the checkbox component
The Chips Component in PrimeNG is used to take input of many values in a single field. By default, a chip beaks when we press the enter key but this behavior can be altered by using the separate property.
The Chips Component is used to take input of multiple values in a single input element. It is commonly used to take input of filters on popular e-commerce websites.
The Form Chips Component in PrimeNG takes the input of many values in a single field. The use of chips can be seen on most e-commerce websites like Flipkart, Amazon, etc.
The ColorPicker Component is used to take input of color from the user. In the inline color picker, the color selection box is shown to the user but in overlay mode, the color picker overlay appears when the user selects the colored div.
Model Driven Forms Component
The ColorPicker Component is used to take the input of color from the user.
The ColorPicker Component is used to take the input of color from the user. It provides a beautiful UI where users can choose the color and that color can be accessed by our application in different color formats.
The Color Picker Component is used to take the input of color from the user. It provides a beautiful UI where users can choose the color and that color can be accessed by our application in different color formats.
The Color Picker Component is used to take the input of color from the user. It provides a beautiful UI where users can choose the color and that color can be accessed by our application in different color formats.
The ColorPicker Component is used to make a component in which users can select colors. The Styling Component helps to make the interactive Form ColorPicker by implementing the different stylings provided by Angular PrimeNG.
Dropdown Component
The Dropdown Component can be used to make to choose the objects from the given list of items.
In a Dropdown Component, we provide users with a list of options out of which users can select any one option. It is generally used in implementing filters, asking for the country of the user, etc.
In a Dropdown Component, we provide users with a list of options out of which users can select any one option. It is generally used in implementing filters, asking for the country of the user, etc.
The Dropdown component is used to make to choose the objects from the given list of items. The Templates Component is used to define the template of the dropdown component.
The Angular PrimeNG Form Editor is a Quill-based rich text editor component. The form editor toolbar may be customized to have various editing options accessible as per the user’s requirements.
Model Driven Forms Component
Editor is a Quill-based rich text editor component.
The Angular PrimeNG Form Editor is a Quill-based rich text editor component. The form editor toolbar may be customized to have various editing options accessible as per the user’s requirements.
The InputMask component allows user to input values in a certain format which includes numeric, date, currency, and phone. Combinations of the following built-in definitions are possible for mask format.
The InputMask guides the user about what value to enter in the input. It betters the user experience on our application. A part of the Input can be made optional with the ‘?’ symbol.
The InputMask Component provides the user with a specific format that he has to abide by when entering the data. The data can be anything such as date, phone number, currency, etc.
The InputMask Component provides the user with a specific format that he has to abide by when entering the data. The data can be anything such as date, phone number, currency, etc.
InputSwitch Component
The InputSwitch Component is used to take a boolean input from the user. It has two states, on and off. It can be turned on initially by binding its value with a boolean variable set to true. There is only one event associated with the InputSwitch component which is given below.
The InputSwitch Component is used to take a boolean input from the user. It has two states, on and off. It can be turned on initially by binding its value with a boolean variable set to true. There is only one event associated with the InputSwitch component which is given below.
The Form InputSwitch is used to take input of a boolean value from the users. It can be bonded to a boolean variable using the ngModel directive provided by Angular itself. If the bonded variable is set to true, the InputSwitch will be enabled by default.
Inputtext Component
The Inputtext Component is an element that is used to make a text field with multi-line input support.
The Inputtext component is an element used for entering data created by inputText. Depending on where the icon will be placed within the input field, an element with the class p-input-icon-right or p-input-icon-left can be used to surround both the input and the icon
The Inputtext Component is an element used for entering data created by inputText. There are 2 other sizes available in addition to the standard input; use p-inputtext-sm for a smaller input and p-inputtext-lg for a bigger one.
Other elements like text, icons, buttons, etc. can be grouped with text input by wrapping the other elements and the input field inside the p-inputgroup class. The addon elements should have a p-inputgroup-addon class applied to them.
The Angular PrimeNG Form InputText Component renders a field for taking input of text data from the user. InputText can be applied to a text input element by applying the pInputText directive.
InputTextarea Component
The InputTextarea Component is an element that is used to make a text field with multi-line input support.
Components
Description
Default Component
It is used for user input a basic form layout featuring PrimeNG textarea
The InputNumber Component allows a user to input content as a numerical value. When no additional configuration is present, the default value of the mode property, “decimal” restricts input to the integers format that is configured using this property.
The InputNumber Component allows a user to input content as a numerical value. Setting the mode option to currency and the currency property will specify the currency formatting.
The InputNumber Component allows a user to input content as a numerical value. With the use of prefix and suffix attributes, custom texts, such as units, may be positioned before or after the input section.
The InputNumber Component allows a user to input content as a numerical value. Spinner buttons may be activated using the showButtons attribute, and buttonLayout controls layout. “Stacked” is the default value. The other two are “horizontal” and “stacked”.
The InputNumber Component allows a user to input content as a numerical value. The default step factor is 1 & it can be customized with the help of the step option.
The Form InputNumber Component is used to take numerical input from the user. The custom styling of the InputNumber component can be done using the structural style classes listed below.
The Form InputNumber Component is used to take numerical input from the user. The InputNumber component can be bound to a number variable using the ngModel directive provided by Angular itself.
The Form InputNumber Component is used to take numerical input from the user. The custom styling of the InputNumber component can be done using the structural style classes listed below.
Invalid State Component
The Invalid State Component can be used to show an invalid state style in the form module. When the class is set to invalid, it will provide the style for the input element as invalid.
Form Knob Component
The Knob component is a form component that is used to define a dialer type knob that contains labels and some data values.
The minimum and maximum value of the knob can be specified using the min and max properties of the component. The default minimum value of the knob is 0 and the maximum value is 100.
Using the Knob component makes the website more interactive and betters the user experience. The Knob step is a facto by which the value of the Knob will increase or decrease in one change.
he Knob Component is used to take numerical input from the user with a dial. The knob’s value can be bounded to a number variable defined in the app.component.ts file
The KeyFilter component can used to set the data type that is to be used for an input field. It also filters other data types from the entered data types.
The KeyFilter component is used to set the data type that is to be used for an input field. It also filters other data types from the entered data types.
Listbox Component
The ListBox component can be used to make a list component from which we can select one or more items and can also be discarded if the item is not required by unchecking in the list.
is used to make a list component from which we can select one or more items and can also be discarded if the item is not required by unchecking in the list.
s used to make a list component from which we can select one or more items and can also be discarded if the item is not required by unchecking in the list. By enabling the optionDisabled property, which prevents the particular options from getting selected.
. There are a total of five structural styling classes that can be used to alter the styles of the Listbox component according to our needs.
MultiSelect Component
The Multiselect Component provides the user with a list of options where the user can select one or more options. The properties of the MultiSelect Component are listed below.
default the selected options are displayed in plain text separated with a comma. To enable the chips display mode, the display property can be set to “chip”.
The grouping of the MultiSelect option allows us to group similar options together which helps users to find the relevant option quickly and betters the user experience.
MultiSelect Component can be used to select multiple values from the menu. The Templating Component is mainly used to provide a template and the Filtering Component is used to filter the options from the given list.
VirtualScrolling is an effective method for rendering the options. To avoid performance issues when dealing with a large number of options, VirtualScrolling should be enabled.
The value of an option in MultiSelect is bounded to the model itself but we can use the optionValue property of Multiselect to pass the custom value for the options.
The individual options of the MultiSelect component can be displayed by passing a boolean property of the options object as the value of the optionDisabled property.
Define an ng-template named item whose local ng-template variable identifies an option in the options collection for custom content support when displaying options.
This can be changed by specifying a template string using the selectedItemsLabel property where the number of selected items can be accessed using {0} in the template.
The Multiselect component is used to provide the user with a list of options where one or more than one options can be selected by the user. The properties of the MultiSelect Component are listed below.
The MultiSelect Component is used to select multiple values from the menu. There are various templates provided by the Angular PrimeNG Form, in order to organize in a structured way & can be grouped, in order to categorize the form.
The Password Component is used to represent the strength indicator for the password fields. For medium and strong passwords, the password component employs regular expressions with the following settings.
The Password Component is used to take the input of sensitive information like passwords, credit/debit card CVV, etc from the user. When it is in focus a password strength indicator is shown to the user.
The Password Component is used to take input of the sensitive information from the user. It changes all the characters entered by the user into bullets
The Password Component is used to take the input of sensitive information like passwords, credit/debit card CVV, etc from the user. When it is in focus a password strength indicator is shown to the user
The Password Component is used to take the input of sensitive information like passwords, credit/debit card CVV, etc from the user. When it is in focus a password strength indicator is shown to the user
RadioButton Component
The RadioButton Component allows the user to select one option at a time from a set.
The RadioButton Component allows the user to select one option at a time from a set. This is an extension for the radio button element that has various theming.
The PrimeNG Form Component is built on top of the HTML radio input element with theming. The label property of the RadioButton component can be used to provide a label for the radio input.
The PrimeNG Form Component is built on top of the HTML radio input element with theming. The label property of the RadioButton component can be used to provide a label for the radio input.
The PrimeNG Form Component is built on top of the HTML radio input element with theming. The label property of the RadioButton component can be used to provide a label for the radio input. The events of the RadioButton are listed below.
he Form Rating Component is a selection input based on the star icon. It can be usually seen on product pages of e-commerce websites like Amazon, Flipkart, Alibaba, etc.
Model Driven Forms Component
PrimeNg AutoComplete model provides star based for the inputs.
It is used to set the orientation of the slider, valid values are horizontal and vertical, It is of string data type, and the default value is horizontal.
The SelectButton component is used to make a group of buttons from which the user can select a value. There are various properties contained by the Form SelectButton,
The ToggleButton Component is used to make a button that users can toggle by clicking on it. The onLabel and offLabel properties can be utilized to customize the Labels.
The onIcon and offIcon attributes of a ToggleButton are used to specify the icon’s appearance, and the iconPos property is used to change the icon’s position.
In the TreeSelect checkbox selection mode, a checkbox is displayed next to every item and it can be used to select the item and all the items that come under it in the hierarchy.
TreeNode API utilized
The TreeSelect Component allows the users to select items from hierarchical data. It accepts an array of TreeNodes as its options property to show the data.
.gif){kind=small}