Fax Initial Radio Button with airSlate SignNow

Fax initial radio button

hello guys and welcome back so in this section we are going to talk about adding some other types of fields to your form so we are going so far we have just covered all the text inputs but now let's also cover some of the other basic fields like a checkbox or drop-down as well as a radio button so let's first quickly create some fields in here so I'll name this communication modes this is going to be a string array then we have genders this is again going to be a string array and in the ngoen in it I am going to initialize the senders as male female and other and for the communication modes I am going to specify phone or email all right okay now in this let's start with the radio buttons for genders so I need to do for the class of radio inside which I need a label which lets not specify anything here but inside this I need an input which is of type radio so let's tap that and so it created a label for me inside this there is an input another label and and then the division and itself now since I have both the labels in the typescript class here I will just simply loop through them using mg4 and I will do something like lead gender of genders the value of this is going to be now since I'm using the value as a property I should be using property binding so gender and I also use the string binding for gender like so so then I should also add the ng model to it because I need this considered as a form control so let's save this now and go back so right now in this scene one and there are things like ng model options and some errors popping up let's go back and see what the issue is here well if we have a look at the error then it says that if I'm using ng model then the name property should be applied to it so let's apply a name property as well do it so let's do that using here and specify the name as gender let's save this and go back I'm still just seeing when didyou button and that's a bit odd okay my bad I should have placed this inside on the label because that is something that is going to be repeated for three for all the date all the genders that we have now in this case we should have these three radio buttons getting printed to the screen and let's place a break here so that there is a bit of some space in here okay all right now let's do the same for a select list so this should have a class of form group and in this we should have a select with some name and ID select specify the name as communication mode let's just get rid of this ID we don't really need it here and inside this select I should have some options with some value okay so I already have these communication options here in the communication modes so I will just loop through them inside here again with the help of mg42 that come opt of communication modes so the value of this is again going to be form of because I'm simply using property or strings here so and for the option as well this one and let's also place a label here that would be for the name that we have here so for communication modes like so let's save this and go back and it looks like we have another error it may happen when a tag has already been closed by another time maybe I used some dad somewhere in the wrong place okay I forgot to close this one let's say communication of shims and now we have these two communication options by default this empty one is selected but on the select one I guess we can give a class of form and if I leave this then it should be styled as a proper form field and then finally let's also have a look at a checkbox like so I'll just copy this markup here because the mark-up for a checkbox is similar to that of radio button and instead of radio we should have a checkbox class on the parent div and agreement is something that we lose in this for and the name is going to be a bereavement again the value would be the value of this checkbox when it is checked I have placed an NG model here so that it's considered as a as a loop and then in the world I'll also place an mg model here like so and then type this radio so I should change this to checkbox and then in here I will just simply type in I agree to the terms and conditions like so okay now that we have this form and we can have the value of it as well using the forms name or the or something that is representing the form this is the user form here so let's just quickly type in the name here and this is going to be a JavaScript object representation of the user form and for that I can simply pass it through the Jason pipe so that it turns it transforms that into a string so if I save this now I should have the JavaScript representation okay sorry so this shouldn't be the user form just it should be the userform broth value and I should have the JavaScript representation of the user form like so there should be an agreement field as well so as soon as I type something in the name let's say John Doe then the user name is John Doe Sean dot to add X some Polycom then let me just scroll at the bottom and as as soon as I type something and then you'll see all these fields getting populated or updated simultaneously so let's type a phone number say like this and in the website section let's type in www.google.com let's select the gender to be male in this case and as soon as I select one of these things then you'll see that all these fields are also getting populated at the bottom the communication option that's selected to phone let's say and if I click on agreement then the agreement field would be turned to true if I unselect it it's going to be false again by default it's going to be an empty string but if I select this then it would be true if I am selected it's going to be false and if I submit this now then in the ng form I should also have a field called value again that we have already used here and this is the value that can be essentially sent out to an API so say for example if this was the user a new user home or a new user registration form then this value could be the whole value of this form could be achieved using this value property on this ng form object and that is something that could be sent out to an API for storing it persisting it okay so this was all regarding the value and using fields like a check box radio buttons and drop-down lists inside your form now in the next section we are going to talk about some other things related to forms and especially template driven forms like adding form controls or form control groups to your form so I'll see you guys in the next video bye