Urge Text Field with airSlate SignNow

Create text field

[Music] we're building a check splitting up which means years has to be able to enter the cost their check how many people are sharing the cost and how much tip they want to leave hopefully already you can see that means means add three at state properties because there are three pieces of data we're expecting users to enter into our app so stop adding these three properties to our content view struct at state private var checkout amount equals empty string at state private var number of people equals to at state private var tip percentage equals to as you can see that gives us an empty string for the check amount and a fault value of two the number of people and a default value of two for the tip percentage you might wonder why we're using strings for the check amount when clearly an INT or a double would work better well the reason is that we have no choice swifty y must use strings to store text field values having two people be the default the splitting a check is sensible it won't be right a lot of the time but it's still a good default but a get tip sensor 2 might seem odd do you really intend to leave a two percent tip well no instead we're using two here because we're going to use that to select values from a predetermined array of tip sizes so you can see different picker styles in action we to store the list of possible tip sizes somewhere so please add this fourth property beneath the previous three let tip percentages equals an array of 10 15 20 25 and 0 now you can see that a tip clenched of two actually means a 20% tip because that's the values of tip percentages 2 we're going to build a form step by step starting with a text field where users gonna enter the value of their check modify the body property of this form section text field amount text dollar check amount that will create a scrolling entry form of one section which in turn contains one row our text field when we create text fields informs the first prior two as a strainer gets used as a placeholder great X shown inside the text field giving users an idea of what should be in there the second parameter is the two-way binding to our check amount property which means as these are types that property will be updated one of the great things about the at state property wrapper is it automatically watches for changes and when something happens it will automatically reinvested property that's a fancy way of saying we'll reload your UI to reflect the change state and it's a fundamental feature of the way swift UI works to demonstrate this add a second section with the text view showing the value of check amount like this section text dollar tree interpolation check amount we'll be making that show something else later on but for now please run the app in a simulator so you can try it yourself tap on the check amount text field then enter some text it doesn't have to be a number and a link will do what you'll see is that as you type the text you in the second section automatically and immediately reflects your actions this synchronization happens because one our text field has a two-way binding to the check amount property to the check amount of property is Mart with at state which automatically watch for changes in the value three when at state property changes swifty wire will reinvent the body property ie reload our UI and for therefore the texture you'll get the updated value of check amount the final project won't show check them out in that text view but it's good enough for now I want to address one important problem when you tap to enter text in our text field you just see a regular athletically keyboard yes they can tap a button on the keyboard to get to the number screen but annoying and not really necessary fortunately text fields have a modifier that lets us force a different kind of keyboard keyboard type we can give this a parameter specify the kind of keyboard you want and in this instance either dot number pad or dot decimal pad are good choices both of those keyboards will show the digits 0 through 9 for users to tap on but dot decimal pad also shows a decimal point so users can enter cheque amounts like 30 2.50 rare than just whole numbers so modify your text field to this doc keyboard type dot decimal pad you'll notice I headed a line break before dot keyboard type and also invented it one level deeper than text field that isn't required but it can help you keep track of which modifies apply to which views go ahead and run the app now they should find you can only type numbers into the text field now a big warning the number pad and decimal pad keyboards tell 50 why to show digits 0 through 9 and optionally also decimal point but that doesn't stop you from entering other kinds of values for example if you have a hardware keyboard they can type whatever they like and they copy some text from elsewhere they'll be able to paste that into the text fields no matter what's inside the text that's ok though we'll be handling that eventuality later you