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>
- setValue
- patchValue
- valueChanges
- statusChanges
- get
- markAsDirty
- markAsPristine
- hasError
- 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
One
More
Thing...
Reactive Forms
By just Just
Reactive Forms
- 43