The FormField interface has the following structure with some important notes
/*
* icon: ion-icon name
*
* title: Form field label
*
* formControlName: Used to identify the field by angular form builder
*
* control: Form field controller holds form input data
*
* validators: An array of validators ie [Validators.required, Validators.minLength(10) . . ] full list of form validators in angular docs
*
* type: i.e <input type="text"> | support 'email', 'number', 'password', 'text', 'tel'
*
* placeholder: form field placeholder
*
* formFieldValue: preset formField value
*
* formFieldType: Current version supports 'inline' and 'textarea'
*
* textAreaRowCount: The height in rows if formFieldType === 'textarea'
*
* errors: A boolean for whether or not form field has additional errors apart from validation errors i.e errors applied on a network callback
*
* labelPosition: supported => 'floating', 'stacked', 'fixed'
*/
export interface FormField {
icon?: string;
title: string;
formControlName: string;
control: AbstractControl;
validators: Validators[];
type: string;
placeholder?: string;
formFieldValue?: string;
formFieldType?: string;
textAreaRowCount?: number;
errors?: boolean;
labelPosition?: string;
}
Css Styling
By default the form builder component has the following css classes applied on Success or Error Validations
For success and error classes, only override the border class property
NOTE
You can use your own custom made css that does not follow the above structure to style the form fields since internally the DOM structure is made up of official ion-components.
In that case you do not have to override the defaults ,simply pass in your own custom css class name using one of the applying Css methods below
Applying Css Styling
Method 1: add the classes as module configuration options
Say you are working on a login form and you want to set errors to your form fields when the user has entered the incorrect credentials
In your *.html file use the input [errorsIndex] that takes in an array of indices representing the index of the field to which you want to set an error
In your *.ts file, lets assume you have some api that handles login.
Init an array loginErrors
When you encounter an error, say your api throws back a 401 error, you want to push the indices of the email and password fields into your loginErrors array
the result will be the email and password applying the error css class notifying the user that something is wrong with the login credentials
...
loginForm: FormField[] = [];
email: AbstractControl;
password: AbstractControl;
loginErrors: any[] = [];
...
constructor(
private api: HttpServiceProvider,
) {
this.loginForm = [
{
icon: 'mail',
type: 'email',
title: 'Email',
formControlName: 'email',
control: this.email,
validators: [Validators.required]
},
{
icon: 'lock',
type: 'password',
title: 'Password',
formControlName: 'password',
control: this.email,
validators: [Validators.required]
}
];
}
doLogin(formData) {
this.api.login(formData).then( response => {
// Some success logic
}).catch( error => {
// We know email and password fields are at index 0 and 1 respectively for the purpose of this example
// You could have some intelligent logic to determine fields to which you want errors applied
this.loginErrors = [0, 1];
loader.dismiss();
});
}
...
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
3rd Party Cookies
This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.
Keeping this cookie enabled helps us to improve our website.
Please enable Strictly Necessary Cookies first so that we can save your preferences!