Adam Keyser
- Alternative to template driven forms
- Explicit data management
- Moves logic out of html, into the Component
- Synchronous validation
- Easier to test
- Separation of logic makes it easier to understand what’s happening
- AbstractControl - abstract class for the following
- FormControl
- FormGroup
- FormArray
- FormBuilder
- Tracks value and validity of individual control
const ctrl = new FormControl('potential intital value', Validators.maxLength(100));
ctrl.reset() // Resets
ctrl.valid //Is the control valid
ctrl.pristine //Pristine?
ctrl.value //Current value
ctrl.setValue('new value') // Set new value
- Tracks value and validity of a group of AbstractControl instances
const form = new FormGroup({
first: new FormControl('Nancy', Validators.minLength(2)),
last: new FormControl('Drew'),
});
form.valid //validity
form.status // "VALID or INVALID"
form.value //form data
form.reset() // Resets
- Tracks value and validity of an array of FormGroup instances
- Generally used for Lists of data (Phone Numbers, Addresses, Comments)
- Methods executed on the FormArray will propagate down to all child FormGroups
- Injectable Control meant to simplify form creation
- Reduces boilerplate of
new FormGroup()
new FormControl()
…
- Cleaned up code is much easier to realDeal
Example
constructor(fb: FormBuilder, private userService: UserService, private router: Router) {
this.fb = fb;
this.registerForm = fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
birthday: ['', Validators.compose([birthdayValidator(), Validators.required])],
addresses: this.fb.array([])
});
}
- Synchronous model
- Significantly easier to test
- Separation of concerns makes it easy to understand without significant poking around in html