Forms for Angular and Ionic 2/3/4/5
Form components you’ll need for building great looking mobile and desktop apps. Shipping 15 distinct elements ranging from inputs to layout helpers.
With useful features for a refined UX, including the following elements:
- Single and multiline text
- Select styling
- Buttons
- Segmented control
- Checkbox and checklist
- Radio buttons
- Switch
- Rating
- Stepper
- Page & typography
- Slider
- Progress
- Alerts
- Notifications
- Notes
Forms demos available for other frameworks.
Viewing demos & code for
Forms - Mobile form
Easily create single column layouts and render mobile forms using the various form elements like buttons, inputs, sliders, radio buttons and more.
Use the global settings to set the theme, localization options and everything that should be the same across your app.
Forms - Desktop form
Use the grid layout to create single and multiple column forms suited for medium and large screens. Don't go overboard with too many columns but make use of the available horizontal space on bigger screens.
Use the global settings for setting the theme, localization options and everything that should be consistent across your app.
Forms - Responsive form
Forms - Custom usage
While using mobiscroll forms on its own is great and easy there are a lot of cases where a mixed solution is required. There are three common approaches we came across that are covered by this example.
-
Use mobiscroll form elements inside your existing forms. This is a common scenario that you can come across. Your page is already functional, designed and you would like to update/change a single piece or add something new. Use a stand-alone element like the
mbsc-switchin the example. -
Use custom styled elements inside mobiscroll forms. Let's say you mostly use mobiscroll on your pages and forms but you also have custom components that you'd like to apply. In that case you want to turn all enahncements off for that element with the the
data-enhance="false"property. -
Use mobiscroll form elements outside of an actual form. Also a common use case, think of some content like a couple paragraphs and a subscribe call to action in the middle. Use the stand-alone controls, like
mbsc-inputandmbsc-buttonelements.
Forms - Validation
There are two approaches to implement and validate forms in Angular. You can use Mobiscroll forms with both approaches. Mobiscroll takes care of styling and showing the correct message when wired up correctly.
Template driven forms
With template driven validation, we can set up the whole validation in the template of our component using directives as seen in the first part of our example. The #templateForm="ngForm" template variable will hold the FormGroup. We can later check if the form is valid through this variable.
Use required and minlength directives to make the fields required and give the password the minimum 6 charachters long rule. Use the mobiscroll components [error] and [errorMessage] attributes.
To give each error and field a proper error message, set up a message object in the component, and wire them to the proper [errorMessage] attribute.
Follow a more detailed guide from the documentation.
Reactive forms
In the case of reactive forms, the rules are defined in typescript by importing the Validators. Create a form with the FormBuilder and set up the rules.
The error messages can be set up similarily to the template driven approach and referenced in the [errorMessage] attribute.
Follow a more detailed guide from the documentation.
Forms - Various fields
Forms - Inline components
Forms - Embedded forms
Forms - Input styling
Forms - Create account
Forms - Sign up
Forms - Log in
Forms - Theming capabilities
Forms can be themed and customized. There are four levels of customization:
- Base themes: Choose between
Mobiscroll,iOS,Android MaterialandWindows. - Light or dark: Every theme has a
lightanddarkvariant. Setting thethemeVariantto'auto'will switch based on system settings. - Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom Sass and CSS: If you need further customization, the sky is the limit with Sass and CSS overrides.
You can also see how the other demos look by changing the theme in the floating action bar on the right side (not this example, the themes are hardcoded here).
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.