Using form builder

Using form builder with your input fields is easy. You need to inject FormBuilder, create a form group, then associate the form group to the container and the form fields to the input fields.

<div [formGroup]="form">
	<div>
		<label>Username</label>
		<input placeholder="Enter username" formControlName="username" />
	</div>
	<div>
		<label>Password</label>
		<input placehold="Enter password" formControlName="password" />
	</div>
	<button (click)="onLogin()">Login</button>
</div>

  fb = inject(FormBuilder);
  form = this.fb.group({
    username: [''],
    password: [''],
  });

  onLogin() {
    const { username, password } = this.form.value;
    console.log(username, password);
  }