Coding

Angular 2 Tutorial (2016) – Forms (with Two-Way Databinding)

  • 00:00:02 hey everyone great to have you back now
  • 00:00:05 throughout this tutorial we've already
  • 00:00:06 covered some ground we learn how to use
  • 00:00:09 components how to let them interact what
  • 00:00:12 data binding is we learn how to set up
  • 00:00:15 our routing how to pass parameters with
  • 00:00:17 routing so we've really covered a lot of
  • 00:00:20 great fundamentals we'll need in our
  • 00:00:23 day-to-day applications now there's
  • 00:00:25 still our open issues on our to-do list
  • 00:00:27 so to say the way we handle the forum
  • 00:00:30 currently is not the most elegant and
  • 00:00:33 there are way better ways when it comes
  • 00:00:36 to handling forms in angular 2 we never
  • 00:00:39 touch the issue of accessing the web so
  • 00:00:43 accessing a restful server for example
  • 00:00:45 will have to do something about this in
  • 00:00:47 this course – there are other things in
  • 00:00:51 angular 2 that we haven't touched like
  • 00:00:53 pipes when our pipes the that's the
  • 00:00:56 thing I really want to talk about in a
  • 00:00:58 future video we haven't built any custom
  • 00:01:01 structural directives for example we
  • 00:01:03 haven't discussed custom events and how
  • 00:01:07 to propagate those so there are a lot of
  • 00:01:10 yes I said open issues we'll have to
  • 00:01:14 tackle throughout this course and in
  • 00:01:17 this video well we're going to start
  • 00:01:20 with the forms issue because as I said
  • 00:01:23 there are great ways of managing and
  • 00:01:25 handling forms and angle at you and
  • 00:01:27 we'll learn one in this video then I'll
  • 00:01:30 have another with you where I'll show
  • 00:01:33 you a number of maybe even more elegant
  • 00:01:36 way of handling forms and I'll also put
  • 00:01:40 up a separate forms video where I'll
  • 00:01:43 cover the complete topic in a well very
  • 00:01:46 forum specific way and not in the
  • 00:01:49 context of our overall tutorial like
  • 00:01:51 I'll do in this video so you probably
  • 00:01:53 should watch both but whatever please
  • 00:01:56 leave your feedback and I'll be happy to
  • 00:01:59 have you with me on this course in the
  • 00:02:01 future see you there
  • 00:02:02 bye now here is where we left off we had
  • 00:02:07 our new contact form which could ever
  • 00:02:10 access by clicking this button here and
  • 00:02:12 creating it
  • 00:02:13 contract from an existing contact or by
  • 00:02:15 just clicking you contact up here to
  • 00:02:17 create a completely new contact now
  • 00:02:21 currently we're handling all this by
  • 00:02:23 assigning each input element here a
  • 00:02:26 local variable and then when we hit
  • 00:02:29 submit well we're basically passing the
  • 00:02:32 values of our input fields through this
  • 00:02:34 local variable to our submit function
  • 00:02:37 now asn't really said that is not the
  • 00:02:40 most elegant way because if we add more
  • 00:02:43 input fields we will have to introduce
  • 00:02:46 more and more local variables we will
  • 00:02:49 then have to expand a list of arguments
  • 00:02:51 our method here if we ever change
  • 00:02:53 something to the method we will have to
  • 00:02:55 do it here and at the bottom cell
  • 00:02:59 validation isn't an even a thing in this
  • 00:03:01 case here so that's really not the best
  • 00:03:04 way especially as angular 2 offers us
  • 00:03:07 some really great tools you can use when
  • 00:03:10 it comes to forms now as I said many
  • 00:03:14 tools there are different ways of
  • 00:03:16 building forms with angular 2 and which
  • 00:03:19 kind of way you wanna choose depends on
  • 00:03:21 what you want to achieve now I will show
  • 00:03:24 you the different ways and then it's up
  • 00:03:26 to you to pick whatever you think suits
  • 00:03:28 your needs or whichever way you like
  • 00:03:30 best in this video we'll cover the way
  • 00:03:33 where we will use two-way data-binding
  • 00:03:35 to both our form so let's do this so to
  • 00:03:40 do this I'll go to my new contact
  • 00:03:43 component here I already have it open
  • 00:03:45 and first I'll get rid of all these
  • 00:03:48 local variables here I'll also get rid
  • 00:03:51 of this value field here so let me do
  • 00:03:54 all that and I'll also get rid of this
  • 00:03:58 click function here instead this will
  • 00:04:01 get type submit' and now I'll do
  • 00:04:05 something which makes it a lot more like
  • 00:04:08 a foreigner which is very important for
  • 00:04:10 a role to be able to handle it as a form
  • 00:04:13 I'll wrap this form into form tags so
  • 00:04:18 that's not only more valid html5 or HTML
  • 00:04:23 ageneral it as a set is a
  • 00:04:26 necessary for angular2 to recognize this
  • 00:04:31 block here as a form because whenever
  • 00:04:35 angular2 finds a form tag or a form
  • 00:04:40 element in a documentary it will
  • 00:04:42 automatically attach the mg form class
  • 00:04:47 or directive to that form element and
  • 00:04:51 that's very important because we don't
  • 00:04:54 have to add any directive here like
  • 00:04:57 writing and you form equals anything or
  • 00:05:04 something like this we don't have to do
  • 00:05:06 anything like this
  • 00:05:07 angular 2 will automatically do this for
  • 00:05:10 us so this form is now under control if
  • 00:05:15 you want to say it like this of angle 2
  • 00:05:17 and there is a invisible ng form
  • 00:05:21 attached to it now I'll just set m g4
  • 00:05:26 was automatically added to this form
  • 00:05:29 element here so you may think of it this
  • 00:05:31 way every directive has a selector like
  • 00:05:34 for ng 4 for example that's the selector
  • 00:05:38 of the mg 4 directive now ng form has
  • 00:05:42 let's say two selectors one would be ng
  • 00:05:45 form and one would be form and that's
  • 00:05:51 why every oops every form element in our
  • 00:05:54 document is automatically an energy form
  • 00:05:57 directive and why is that so important
  • 00:06:00 because we can use methods and actions
  • 00:06:05 on this form or with this form that are
  • 00:06:08 only available due to the ng form
  • 00:06:12 directive and therefore it's very
  • 00:06:14 important for you to recognize that we
  • 00:06:16 have access to these methods even though
  • 00:06:18 we're never ever attaching ng form here
  • 00:06:21 directly it's done for us just want to
  • 00:06:24 point that out now with that we get this
  • 00:06:29 form on the control of angular 2
  • 00:06:31 well we might want to access the overall
  • 00:06:34 validity of the forum
  • 00:06:35 or the overall value complete foreign
  • 00:06:38 when it is submitted
  • 00:06:39 so to do this we can assign a local
  • 00:06:41 variable to this form like let's say
  • 00:06:44 money form and then set this equal to
  • 00:06:48 and now the dispassion clue comes and ng
  • 00:06:54 form so now here we're using ng form or
  • 00:06:58 we're setting a reference to our ng form
  • 00:07:01 object that's the best way to say it
  • 00:07:06 that's the best way to describe this
  • 00:07:07 relationship we're setting this local
  • 00:07:10 variable which holds a reference to our
  • 00:07:12 energy form object which in return is
  • 00:07:16 this whole form here and specifically
  • 00:07:20 it's an object of type control group now
  • 00:07:23 control group is a angular to specific
  • 00:07:26 object which may hold several controls
  • 00:07:30 and as you might already guess controls
  • 00:07:34 are our inputs we have in a form that
  • 00:07:37 are the controls but we'll have to
  • 00:07:40 specify our controls with the ng control
  • 00:07:42 directive and so that's what we're going
  • 00:07:44 to do now so I'll just add a line break
  • 00:07:47 here so that we have a more structured
  • 00:07:50 way of reading this DB adage or the
  • 00:07:55 directives I'm attaching to this input
  • 00:07:56 element so I'll make this input element
  • 00:07:59 here a control of this form in the
  • 00:08:02 angular 2 recognition so to say by
  • 00:08:07 attaching the ng control directive and
  • 00:08:11 then I'll just choose the name I want to
  • 00:08:14 have for and with under which I'll be
  • 00:08:17 able to access it so now this input here
  • 00:08:20 is control of this form to which I have
  • 00:08:24 a reference with this my form local
  • 00:08:26 variable here and inside this form I'll
  • 00:08:31 be able to access the for example
  • 00:08:33 validity or the value of this input
  • 00:08:36 field by using this name here this
  • 00:08:40 because that's the control and under
  • 00:08:44 which it is recognized in this over
  • 00:08:46 foreign vice versa the a bird inputs
  • 00:08:49 here are not part of the form as if now
  • 00:08:53 because I'm not setting the energy
  • 00:08:55 control directive now as I said ng form
  • 00:08:58 is of type control group and the control
  • 00:09:01 group holds several controls therefore
  • 00:09:04 we have to specify our controls I'm
  • 00:09:07 really just pointing it out this this
  • 00:09:10 way because it's very important to grab
  • 00:09:13 this concept this ng control will be
  • 00:09:16 automatically bound to the parent
  • 00:09:20 control group so the forum for example
  • 00:09:23 here now we could also make this a
  • 00:09:26 control group here we could add ng
  • 00:09:29 control group here and then give us some
  • 00:09:33 some random name here control group and
  • 00:09:35 now this forum would have this control
  • 00:09:38 group match to it in this control group
  • 00:09:40 would hold all the ng controls we were
  • 00:09:43 to nest inside it and therefore we can
  • 00:09:46 very detailed or in just in a way we
  • 00:09:51 need it
  • 00:09:51 access the you know for example by the
  • 00:09:54 validity and values of whole groups of
  • 00:09:56 controls so for example if you want to
  • 00:09:58 match the first last name of a name
  • 00:10:01 together in two different input fields
  • 00:10:03 but it should be one control group and
  • 00:10:05 we could just check control group for
  • 00:10:06 availability to check if both names have
  • 00:10:10 been entered for example or we could go
  • 00:10:12 down one level and check each input
  • 00:10:15 field so for now I'm just going to
  • 00:10:18 remove this control group here and I'll
  • 00:10:20 just have my ng control here in my ng
  • 00:10:23 form now that's been a lot of talking
  • 00:10:27 about this ng control thing but as I
  • 00:10:30 said that's really the key concept off
  • 00:10:32 of forms in angular q and therefore it's
  • 00:10:35 it's very important to to understand now
  • 00:10:39 well point out at this point already
  • 00:10:41 that there're as I said at the beginning
  • 00:10:43 of this video is another way of doing
  • 00:10:45 forms angular two that is using the form
  • 00:10:48 builder and there we won't have the ng
  • 00:10:51 control attached to the
  • 00:10:52 but instead another directive but we
  • 00:10:56 will see that when we're in that
  • 00:10:58 specific video there enough talking
  • 00:11:01 about that we got our mg control here in
  • 00:11:03 our form and now let's say I want to I
  • 00:11:07 want to make this required this input so
  • 00:11:11 it's required to be filled out now
  • 00:11:13 recognize please that this is just an
  • 00:11:15 html5 validation attribute so to say
  • 00:11:20 just pure HTML HTML here and I'm going
  • 00:11:25 to add these two things here or two to
  • 00:11:29 each of my forms here that's going to be
  • 00:11:32 or each of my inputs here excuse me
  • 00:11:33 that's going to be my last name that's
  • 00:11:37 gonna be my phone number here and that's
  • 00:11:41 gonna be my email so this is my form and
  • 00:11:47 yeah that's just how it looks now I set
  • 00:11:52 it to required so currently this should
  • 00:11:55 all be invalid now let's see if this is
  • 00:11:58 true now a sad validation and so on
  • 00:12:02 would be very easy with angular 2 now
  • 00:12:05 all my fields here should currently be
  • 00:12:07 invalid because I said every input field
  • 00:12:10 to required and I haven't entered a
  • 00:12:12 single value now the cool thing is if we
  • 00:12:17 have a form and that is control
  • 00:12:19 Bangaluru as I said and we have our
  • 00:12:21 controls in this form specified with ng
  • 00:12:24 control then each of these controls get
  • 00:12:28 several CSS classes describing its
  • 00:12:31 current state so if we go into
  • 00:12:34 inspection mode here we see that this
  • 00:12:38 input has the ng pristine class that
  • 00:12:42 means it is empty the ng invalid class
  • 00:12:47 that means it's currently not valid
  • 00:12:49 because it is required in currently
  • 00:12:50 empty it's derived by Inglot you do to
  • 00:12:53 the html5 tag I got here and it is ng
  • 00:12:56 touched because when I clicked into it
  • 00:12:58 therefore I did something that changed
  • 00:13:01 something there if we look at the next
  • 00:13:06 input here we get ng untouched because I
  • 00:13:09 haven't clicked into it yet
  • 00:13:10 therefore it is untouched so we get
  • 00:13:13 these three descriptions so to say which
  • 00:13:16 you can use is it touched as the user
  • 00:13:18 done something with this input field is
  • 00:13:20 it empty pristine or dirty there is some
  • 00:13:25 text in it and as a valid or not valid
  • 00:13:27 so if I go to my first input here and I
  • 00:13:31 just enter one single character you see
  • 00:13:33 that it is now well touched it is dirty
  • 00:13:36 because it is no longer empty and it is
  • 00:13:38 valid because we have entered one
  • 00:13:40 character and that is all the required
  • 00:13:42 attribute requires us to do now I can
  • 00:13:46 just abuse these automatically added CSS
  • 00:13:49 class by going to my Styles here adding
  • 00:13:51 the ng invalid select or your severe CSS
  • 00:13:55 class and she loved it
  • 00:13:56 and I'll just give my input then a
  • 00:13:59 border of one pixel solid red now let me
  • 00:14:04 save this as you can see all my inputs
  • 00:14:07 are now red and if I had to text well
  • 00:14:09 now it's no longer red so that's basic
  • 00:14:12 validation you're at angle at you with
  • 00:14:14 the form the ng4 directive and well that
  • 00:14:19 that's cool now we can validate our form
  • 00:14:21 now we also want to be able to send it
  • 00:14:23 previously we had our click event here
  • 00:14:28 on the button and then we would send the
  • 00:14:29 value of each input well it's easier
  • 00:14:32 with forms we can't just go to the top
  • 00:14:34 of the form and notice that we have no
  • 00:14:36 action or method here that's because
  • 00:14:38 we're not sending and request to the
  • 00:14:40 server here
  • 00:14:41 but we can add another and directive for
  • 00:14:45 an event here that is ng submit notice
  • 00:14:50 the parentheses which always as I
  • 00:14:52 explained means where we're having an
  • 00:14:55 event here it's it's triggered by action
  • 00:14:58 in this case that the submit button will
  • 00:15:00 be clicked so this type submits very
  • 00:15:02 important because if this button is
  • 00:15:04 clicked this action you will be fired so
  • 00:15:08 let's say I want to trigger the on
  • 00:15:09 submit function then I don't pass any
  • 00:15:13 arguments to it and if you're in
  • 00:15:17 the body of my component I'll have my
  • 00:15:20 unset mid function and now as someone
  • 00:15:24 needs to pass the values now how could I
  • 00:15:29 do this now there are different ways but
  • 00:15:31 one is I could somehow get a reference
  • 00:15:34 to this form and then as all the
  • 00:15:36 controls are bound to it access the
  • 00:15:38 value of these form controls but there
  • 00:15:41 is a more elegant way and as a set we'll
  • 00:15:44 discover another very elegant way to in
  • 00:15:46 the next video but this one we're going
  • 00:15:49 to use two-way data-binding
  • 00:15:51 so I'll just get rid of this past last
  • 00:15:55 name because I won't need it anymore
  • 00:15:57 and I'll just add a new property here
  • 00:16:00 which I will call it this new contact
  • 00:16:03 which will be of type contact so that
  • 00:16:05 will be just the object will will theta
  • 00:16:10 binds to and I will add this on each of
  • 00:16:15 my controls here so just the good old
  • 00:16:18 data binding two-way data binding we
  • 00:16:20 know the ng model and bind it to new
  • 00:16:24 contact first name here and I'll just
  • 00:16:28 copy that find that to last name find
  • 00:16:34 that to phone and that unsurprisingly to
  • 00:16:40 email so now I got my IQ a data binding
  • 00:16:47 here going on and now I want you cope
  • 00:16:51 for the for the fact that I can pass a
  • 00:16:54 parameter to this form and have my last
  • 00:16:57 name already filled out there for our
  • 00:16:59 chimp we'll change this here in my ng on
  • 00:17:01 init method and instead of setting this
  • 00:17:04 past last name I will set my new contact
  • 00:17:07 to well a new contact chest here where I
  • 00:17:16 will bind the last name to this value
  • 00:17:23 we're getting here
  • 00:17:25 possibly getting through our flower
  • 00:17:29 routing and I'll also set a first name
  • 00:17:33 oh that's just going to be an empty
  • 00:17:34 string last name as this value the phone
  • 00:17:37 number will be an empty string and the
  • 00:17:39 email will be an empty string too so now
  • 00:17:41 we get this new contact set when we load
  • 00:17:43 up this form and you can already see
  • 00:17:46 this if I go here and I click create new
  • 00:17:48 contact you can see my last name is
  • 00:17:50 already filled out so that's working now
  • 00:17:54 this is two-way data-binding
  • 00:17:56 arm I can change all these values and it
  • 00:17:59 will get added to this new contact but
  • 00:18:03 to actually see that or to set that back
  • 00:18:06 and create it in our list I'll just use
  • 00:18:10 my own submit function here or method
  • 00:18:13 here and here there's one simple thing
  • 00:18:16 I'll do or two things I'll do the first
  • 00:18:18 one is I call my contact service and
  • 00:18:20 I'll insert a contact and which contact
  • 00:18:24 will insert well exactly the new contact
  • 00:18:26 because it will be bound to this form
  • 00:18:29 and the second thing is well I'll just
  • 00:18:32 navigate back copy that get rid of this
  • 00:18:35 on add contact we're not using it
  • 00:18:37 anymore and I'll let me save this and
  • 00:18:39 let's get back here loader click create
  • 00:18:44 contact
  • 00:18:45 well that is html5 so just gonna fold
  • 00:18:50 that out with some dummy value create
  • 00:18:55 and now we can see our contact here and
  • 00:18:57 that is how easy we can create a new
  • 00:19:00 contact with energy format the two-way
  • 00:19:02 data-binding and now compare this to our
  • 00:19:05 last solution here it's very simple to
  • 00:19:08 add new inputs or anything like this as
  • 00:19:10 long as our model we're binding to
  • 00:19:13 supports it but what that will always be
  • 00:19:15 the premise because otherwise why would
  • 00:19:17 we want a value we're not storing
  • 00:19:19 anywhere in our application so if that's
  • 00:19:22 the case well we won't have to change
  • 00:19:25 any arguments in this function here or
  • 00:19:27 in our function below down here now
  • 00:19:30 all we have to do is bind to this model
  • 00:19:33 and that's really everything and then we
  • 00:19:36 will just
  • 00:19:38 send our new contact to the to direct
  • 00:19:44 contact service here and if we weren't
  • 00:19:47 to have the possibility of creating a
  • 00:19:50 new contact with the last name so if
  • 00:19:52 this forum wouldn't exist with a
  • 00:19:54 possibility of a prefilled input field
  • 00:19:57 well this part wouldn't be necessary and
  • 00:19:59 then all we would have is this line here
  • 00:20:03 and our standard form of ng submit and
  • 00:20:07 ng control to handle the whole form
  • 00:20:12 including the validation and that I
  • 00:20:15 think is really a strong argument for
  • 00:20:17 angular 2 because that is really fun and
  • 00:20:20 really easy to do so that was quite a
  • 00:20:23 long video because there were some key
  • 00:20:26 things I really wanted to stress and to
  • 00:20:28 emphasize so I hope you now have a good
  • 00:20:32 picture of how you can build forms in
  • 00:20:36 angular 2 and how you can take advantage
  • 00:20:39 of the built-in tools now I'll be honest
  • 00:20:44 there are other advantages because us by
  • 00:20:47 using the ng form directive that I
  • 00:20:50 haven't even told you here for example
  • 00:20:53 we can as we're binding to the form here
  • 00:20:56 we can add a local variable here at the
  • 00:20:59 input and just bind this to ng form as
  • 00:21:03 well which will then not bind to the
  • 00:21:06 whole form but instead to this single
  • 00:21:09 input field here now that would allow us
  • 00:21:12 to do something like adding a span
  • 00:21:14 behind it that is only shown if the the
  • 00:21:19 first name is valid valid is just a
  • 00:21:25 property we can access to in a in a
  • 00:21:28 control in ng
  • 00:21:30 control is the class which will be
  • 00:21:34 inserted here so to say or reference
  • 00:21:37 here with the ng control directive so we
  • 00:21:39 can access this valid property and check
  • 00:21:41 check if it is not valid to display like
  • 00:21:44 a text of not valid here and if we now
  • 00:21:48 save this wait we see we could not
  • 00:21:51 here which disappears when we type
  • 00:21:52 something so we can bind to two elements
  • 00:21:56 by two input elements by using this ng
  • 00:22:00 form reference here we always a code for
  • 00:22:04 example binds to our overall form here
  • 00:22:07 by using the disabled binding here and
  • 00:22:11 saying if our my form I think I called
  • 00:22:15 it did I call it my form yeah if my form
  • 00:22:21 is there to access the foreign property
  • 00:22:26 of then valid if that is not well it
  • 00:22:29 well then the spot we should be disabled
  • 00:22:31 so I can't click it until I filled out
  • 00:22:33 everything here then I can click it and
  • 00:22:35 now I got my contact here so that was
  • 00:22:37 really quick because I think that talks
  • 00:22:39 for itself but that that are the
  • 00:22:42 concepts which I have been covered in
  • 00:22:44 detail here but there will be future
  • 00:22:47 videos coming up on this channel for
  • 00:22:48 sure and the next one will talk about
  • 00:22:51 the form builder which is another way of
  • 00:22:55 approaching that form issue well
  • 00:22:56 obviously not totally different but for
  • 00:22:59 example it doesn't use two-way
  • 00:23:01 data-binding it has a number approach
  • 00:23:03 and well you will see everything in the
  • 00:23:06 next video see you there have a nice day
  • 00:23:08 bye