Join Justin Schwartzenberger for an in-depth discussion in this video FormGroup, part of Angular 2 Forms: Data Binding and Validation.
- [Instructor] To use the model-driven approach to forms, you need to add the ReactiveFormsModule to the list of imports for your Angular module. In the app.module.ts file of the project code, I can add a new import statement, and bring in the ReactiveFormsModule from the angular/forms scoped package. Then I can add the ReactiveFormsModule to the imports metadata property array. The ReactiveFormsModule contains all of the form directives and constructs for working with forms.
With this in place, I'm ready to start creating the form. I'll be adding the form model code to the OrderSheetComponent class in the order-sheet.component.ts file. This class is already setup with a template file and a CSS file. Angular provides a class named FormGroup that is the foundation of a form model. Representing a form in code begins with an instance of a FormGroup. First you need to import the FormGroup class from Angular. FormGroup is found in the angular forms scope package.
I'll add the import statement for that near the top of the file. Then you are going to want to make the FormGroup, which will represent the form available to the template. I can add a public class property to hold the FormGroup. I'm going to name this "orderSheetForm". Now you can name this whatever you like, but I prefer to be a bit more specific than a name like "form". That way if I end up needing to add another form to this component, I don't have to deal with a rename.
Now I'm putting this property at the top of the class, following the same pattern that is documented in the style guide on the official Angular website. Remember, all of the code for the app will be created based on the patterns of that style guide, making it easy for you to have a point of reference at anytime to go along with this course. So I have this property named orderSheetForm. I'm going to use a little typescript here to specify that it is of type FormGroup, by adding a colon, followed by the type after the property name, but before the semicolon.
Doing the typescript thing here is optional, but by adding this, you will see most code editors that have typescript support, light up with a bunch of autocomplete, navigation and documentation that will make your development lives easier. Now there are two ways you can create a FormGroup. You can instantiate a new instance of it using the FormGroup class, or you can use a class that Angular exports named FormBuilder that has some methods on it to create FormGroups, and even FormControls. I'm going to use the FormBuilder here.
A FormBuilder is exported from the angular/forms scope package just like FormGroup, so I'll add that to the import statement. To use the FormBuilder, you can add it to the constructor parameters, to have Angular's dependency injection provided to the class. I'm going to use some typescript syntactic sugar here, putting the private access modifier keyword in front of the variable, so that it will get created as a field on the class.
And I'll add a private method in the class called buildForm, and put the build logic in there. So I need to call this buildForm method from the constructor, and then down in the new method I can set the orderSheetForm equal to the results of a call to the formBuilder.group method. The group method expects an object that has properties that represent form controls in the group.
Now I will cover those in the next video, so for now I'll just give this an empty object literal. FormGroups are used for the base of the form model representation, but they are also used to logically group form controls together. A FormGroup will aggregate the values of the form controls in it, so its status will depend on the status of its children. You will see this in action in a later video when I cover creating a custom validator. Okay, now there's one more thing I will do here before I move on, and that is to tell the template markup about this FormGroup.
Right now, with the ReactiveFormsModule in play, all form tags are going to get processed by Angular via directive in the ReactiveFormsModule. That directive will be looking for a FormGroup property for each form element. So over in the order-sheet.component.html file I can add a property binding for the term formGroup, and set that equal to the orderSheetForm class field I created. This handles wiring up the formGroup I created in the component class, to the form in my template.
Now I will cover this in more detail in an upcoming video, but for now, this will make it so the code can run in the browser without error.
- Building an Angular form
- Creating a model-driven form
- Using the three fundamental form building blocks: Controls, groups, and arrays
- Handling different input types: Text, checkboxes, selections, and radio input
- Adding change detection to your forms
- Creating custom validations