Template driven forms - lordoftheflies/angular-essential-training GitHub Wiki

To make use of the forms module, you need to add it to the list of imports for your angular module. In the app.module.ts file, we can add a new import statement and bring in the forms module from the angular forms scoped package. Then we can add the forms module to the imports metadata property array. The forms module contains all the form directives and constructs for working with forms. With this in place, we are ready to start creating the form. Our project code for this lesson, already has immediate dash item dash form components set up and the app module and app component are wired up to render it for us. So we can dive right into working on the new form. Let's switch over to the media dash item dash form.component.html file. In angular the template driven approach to building forms makes use of the template syntax to build form interactions all within your template markup. With the forms module included in the app angular is going to be on the lookout for any form elements in your templates. It does this through the builtin ng form directive which has form as part of its selector value. So you don't need to tell angular you have a form when you use the template driven approach. But you do need to tell it what fields are going to be part of the form. This is done through the NG model directive. On the medium HTML select element, lets add the directive NG model. The NG model directive is designed to work with the name attribute that is native to HTML elements. Since the form field already has a name attribute, with the value of medium, the form control that the NG model directive will create, will get the name medium. Even though the markup consists of multiple form field elements, angular's form system only knows about the medium one right now, because that is the only one with the NG model directive on it. We can see this in action if we wire up the submit functionality right now. Let's cover how we do that, then we'll come back and finish off the rest of the form. Angular has a directive named NG submit that is designed to be used on a native form element to intercept the default HTML form submit action, and do what you want. So on the form element, we add an event binding using the parentheses around NG submit and set it equal to a function call that we will create of on submit. Since there's a button in the form of type submit, the click action of that will trigger the form submission. That part is native HTML behavior for a form. Okay, we are going to need to create that on submit function on the component class, but we also need to pass it the form information, since we are building everything in the template. This can be done by using the hash on the form element, to capture a handle to the form that angular creates. So on the form element, we put hash media item form. Remembering that these template reference variables can have whatever name we want. And we set that equal to NG form and double quotes. Angular we'll export a form group object, into the media item form variable for us. The form group is the underlying model angular uses for the form. From here, we can pass in the value of the form to the on submit method, by using media item form.value. And then over in the media dash item dash form.component.ts file, we can add the on submit method, naming the parameter media item, and console log it for now. Over in the browser with the console open, we can fill out the medium field and click the submit button. And in the console window, we can see the form model as a JavaScript object with only the medium field on it. Let's go back to the template file, and add in the rest of the NG model directives on the other form fields. And then switching back to the browser, we can fill out the form fields with some test data, then we can submit, and see the form model has the data structure we want.