Reactive Forms

Basic

Reactive forms are forms where we write logic, validations, controls in the components class part of the code unlike the template driven forms where control is done in the template. The reactive form is flexible and can be use to handle any complex form scenarios. We write more component code and less html code which make unit testing easier.

Enabling Reactive Forms

import { ReactiveFormsModule } from '@angular/forms';
@Component({...})
export class App { }
@NgModule({
  declarations: [App],
  imports: [BrowserModule, ReactiveFormsModule],
  bootstrap: [App]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);

FormControl & FormGroup

Form Structure

FormControl is a class that powers an individual form control, tracks the value and validation status, whilst offering a wide set of public API methods.

// custom-input.component.ts

ngOnInit() {
  this.inputControl= new FormControl('Pamela Anderson');
}

// custom-input.component.html

<ng-container>
  <input type="text" [formControl]="inputControl">
</ng-container>

  ngOnInit(): void {
   this.studentForm = new FormGroup({
     firstName: new FormControl(''),
     middleName: new FormControl(''),
     lastName: new FormControl(''),
     account: new FormGroup({
       email: new FormControl(''),
       password: new FormControl('')
      })
    });
  }

FormGroup is a group of FormControl instances, also keeps track of the value and validation status for the said group, also offers public APIs.

<form [formGroup]="studentForm" (ngSubmit)="saveFormValue()">

  <input type="text" [formControl]="studentForm.get('firstName')">

  <app-custom-input  [inputControl]="studentForm.get('middleName')"></app-custom-input>

  <input type="text" [formControl]="studentForm.get('lastName')">

  <app-custom-form [accountFormGroup]="studentForm.get('account')"></app-custom-form>

  <button type="submit" [disabled]="studentForm.invalid">Submit</button>

</form>
  1. setValue
  2. patchValue
  3. valueChanges
  4. statusChanges
  5. get
  6. markAsDirty
  7. markAsPristine
  8. hasError
  9. setError

Useful staff

Validators

Setting Validators

    this.studentForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      middleName: [''],
      lastName: ['', Validators.maxLength(15)],
      account: this.formBuilder.group({
        email: ['', Validators.required, Validators.email],
        password: ['', Validators.minLength(5)]
      })
    });
  private setValidators(): void {
    const validators: ValidatorFn[] = [Validators.email, Validators.minLength(5)];
    this.accountFormGroup.get('email').setValidators(validators);
  }

Setting Async Validators

    this.studentForm = this.formBuilder.group({
      firstName: [''],
      middleName: [''],
      lastName: [''],
      account: this.formBuilder.group({
        email: ['', [Validators.required], [this.emailAsyncValidator]],
        password: [''],
        confirmPassword: ['']
      })
    });
this.studentForm.get('firstName').setAsyncValidators(this.firstNameAsyncValidator);

Add links

  1.  Reactive Forms Validation

  2.  Reactive Forms

  3.  Reactive Forms Code

One
More
Thing...

Made with Slides.com