Project 16: Login Screen

Angular Engineer

Builds on these lessons

Component Task

Objective

A template-driven form's local reference (#loginForm="ngForm") exposes the whole form's validity, letting you disable submit until every required field is filled.

You're building a login screen.

Task: write a LoginComponent with a template-driven form: a required username field bound via ngModel, a submit button disabled while the form is invalid, and an onSubmit handler logging the form's value.

component.ts

import { Component } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
      <input name="username" [(ngModel)]="username" required>
      <button [disabled]="loginForm.invalid">Log In</button>
    </form>
  `
})
export class LoginComponent {
  username = '';
  onSubmit(form: NgForm) {
    console.log(form.value);
  }
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →