Reactive Forms

Enable

To enable reactive forms, you first have to include the module in the app.module.ts.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    ...,
    imports: [
        ...,
        ReactiveFormsModule,
    ],
    ...
})

Usage

// Template file
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
    <input type="text" placeholder="Add title" formControlName="title" />
    <button type="submit">Add</button>
</form>

// Class File
export class MyClass {
    myForm;

    constructor(private formBuilder: FormBuilder) {
        this.myForm = this.formBuilder.group({
            title: '',
        });
    }

    onSubmit(newTitle) {
        console.log(newTitle);
        this.myForm.reset();
    }
}

---

Backlinks

• Forms