Simple & Basic Angular Reactive form example

angular-reactive-form-basic.ts

import { Component, OnInit } from '@angular/core';
import { Validators, FormGroup, FormControl } from '@angular/forms';

@Component({
    selector: 'my-component',
    template: `
      <form [formGroup]="form">
        <input formControlName="email" name="email" type="email" /> <br/>
        <input formControlName="pwd" name="pwd" type="password" /> <br/>
        <button (click)="submit()">Submit</button>
      </form>
    `,
    style: [``]
})
export class MyComponent implements OnInit {

  public form: FormGroup;

  constructor() {}

  ngOnInit(): void {
    this.form = new FormGroup({
      email: new FormControl('', Validators.compose([])),
      pwd: new FormControl('', Validators.compose([]))
    });
  }

  submit(): void {
    if (this.form.valid) {
        console.log('form value: ', this.form.value);
    } else {
        console.log('Error: Form invalid');
    }
  }
}