2.4 Form Controls

Hello everyone, I am Reggie Dawson. Welcome back to the get started with Ionic Creator course for Tuts+. In this video we will look at the form components that we can use at Ionic Creator. As you build your mobile apps to a probably come a time when you want to accept user interaction. Maybe they need to login or save some sort of information. In order to do this, you will need to use form controls. The advantage of using Ionic, is that it is built to an Angular. What this means is that it will be easy for us to take this form input and use it in our app. The first form component we will look at is the form component itself. This component just gives us a starter form with a few default components added for us. For me, this component really doesn't have any use as I prefer to build my forms from scratch. We can also drag in other controls and they will be appended to our form. Instead of us worrying about the form component, we will look at the individual components that we can use in our forms. First we will look at the check box, which represents an on off value. The title is the text that appears in the check box, while the name is the HTML name that will be used. Now with the check box if we have multiple items, more than one can be checked at once. Now the next element the radio was like a check box, with the exception that we can only choose one item out of a group of them. The category serves the purpose of grouping the radio input so we can only select one. Ionic seems to add a category by default when we add multiple radio buttons. Now I've added five radios, but I've given two of them a different category so that you can see how this works. As you can see, by adding a category to the last two, they are in a separate group than the first three radios. Then after that, we have the input. The title is the label that appears next to the input. The type sets the style of the input this will be. Content will have different formatting options depending on what type of input we use. For example, the password format will obscure text. The date input will show a picker so that we can choose a date from the calendar. Now the placeholders for text that will appear in the input as a prompt of what to enter. Name of course is for the HTML name of the input and then finally Label Style determines the way the title is displayed in our input. We can also choose a floating style or stacked. We also have another type of input, the search that is a styled version of a standard input. This doesn't provide any other functionality and just offers a recognizable visible cue that this a search bar by adding a magnifying glass icon. The next control is the range that allows us to choose a numerical value between two numbers using a slider. The title is the label to the left of the slider while the name is for the HTML name attribute. Then the min value is the lowest possible value you can have with the slider or what the result will be if you move the slider all the way to the left. Then the max value is the maximum value of the slider which is the value that you will get when you move the slider all the way to the right. The step is the interval that we can drag between If we set the step to 25, you will see that when we moves the slider it moves by increments of 25. Then finally value is the starting value of our range. As you can see, the slider's in the middle since the initial value is 50. The select input allows us to provide a list of options that users can select from. Title again, is the label that users will see and name is the HTML attribute. By clicking Add Options, we can fill out choices for our users to select. The trash can to the right will let us remove any options that we don't need. Then the text area allows to create multi-line text fields. This will allow our end users to enter multiple lines of text. The title name and place holder are the same as we have seen from other controls. Value allows you to add default text that will appear in our text area. Then finally, we have the toggle component that is an on/off switch and returns true or false. Again this control has standard properties like the other form controls that we've looked at. The only new property of the toggle is the check property. This simply controls whether or not the toggle is in the on position or not. That's everything you need to know to use the form controls of Ionic Creator. In the next video we will look at the list building components that we can use.