Input Validation Sample

https://docs.appery.io/docs/ionic-5-property-validation

Drag and drop the Form component to the Content area

Drag and drop one Input component to the Form.

Set the Show Validation Errors property to True.

For Required, also select true

Now, define the other validation properties one by one as follows:


Min = 1
Message for Min = not enough
Max = 20
Message for Max = too many
Pattern = Only numbers:

To make the input field more user-friendly, let's modify the component label: unfold the Label folder and change its default text, for example, Enter a number: . Also, change the Placeholder property to Enter

You can now save your work and click the TEST button