Reactive Forms — Angular

Reactive Forms memberikan kontrol penuh atas form di TypeScript. Setup import { ReactiveFormsModule } from "@angular/forms" @Component({ imports…

Reactive Forms memberikan kontrol penuh atas form di TypeScript.

Setup

import { ReactiveFormsModule } from "@angular/forms"

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <input formControlName="email" />
      <input formControlName="password" type="password" />
      <button type="submit">Login</button>
    </form>
  `,
})
export class LoginComponent {
  loginForm = new FormGroup({
    email: new FormControl("", [Validators.required, Validators.email]),
    password: new FormControl("", [Validators.required, Validators.minLength(6)]),
  })

  onSubmit() {
    if (this.loginForm.valid) {
      console.log(this.loginForm.value)
    }
  }
}

Yang akan kamu pelajari