MSSE SENG 5199

Course Materials for the MSSE Web Application Development Course

Angular Reactive Forms & Validation

Adam Keyser


Reactive Forms


Benefits of Reactive Forms


Components of Reactive Forms


FormControl

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

FormGroup

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

FormArray


FormBuilder


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([])
        });
    }


Testing Reactive Forms