Section 15 Form – Reactive Angular form

In ts file, declare a property for the form, which type should be FormGroup: such as: signupForm: FormGroup;
Initiate the form in ngOnInit() method:
1. signupForm = new FormGroup({
  1. propertyName1: new FormControl(defaultName, validator, validator),
  2. propertyName2: new FormControl(defaultName, Validators.required / [Validators.required, Validators.email, …], validator),
  3. …});
synchronize the form you create with the form in template
1. binding the created form to template form in <form> tag with formGroup directive, such as: <form [formGroup] = “signupFom”> … </form>
2. sign each form control you create to template form control with formControlName directive, such as: <input … formControlName = “propertyName1” …>
To access each form control object, using get(propertyName), such as:
1. signupForm.get(‘username’).valid
2. signupForm.get(‘username’).touched
3. signupForm.valid // get the whole form validation
FormArray is an array holding a set of form controls, can be used to add new controls form to the form by user.
create your own validators, validator just a function, you need to create a function, return {errorName: boolean}, then put it to form registration part, the second argument:
1. nameForbidden(control: FormControl): {[s: string]: boolean} {
  1. if (ArrayIncludeNameIdFobidden.indexOf(control.value) !== -1) {return {“nameIsForbidden”: true}}
  2. return null;
2. }
create your own asynchronous validator, most same as #6 step, however, return is Promise<any> | Observable<any>, and put it to third argument
valueChanges & statusChanges: two observables using to monitor the form changes.
setValue and patchValue: two methods to be used for set the default value of the form

Section 15 Form – Template-Drive Angular form

Section 17 Pipe

Web Developer

Section 15 Form – Reactive Angular form

Previous Article

Next Article

Leave a Reply Cancel reply