Template-Driven Forms

Search…
The most straightforward approach to building forms in Angular is to take advantage of the directives provided for you.
First, consider a typical form:
<form method="POST" action="/register" id="signup-form">
  <label for="email">Email</label>
  <input type="text" name="email" id="email">
​
  <label for="password">Password</label>
  <input type="password" name="password" id="password">
​
  <button type="submit">Sign Up</button>
</form>
Angular has already provided you a form directive, and form related directives such as input, etc which operates under the covers. For a basic implementation, we just have to add a few attributes and make sure our component knows what to do with the data.
index.html
<signup-form>Loading...</signup-form>
signup-form.component.html
<form #signupForm="ngForm" (ngSubmit)="registerUser(signupForm)">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" ngModel>
​
  <label for="password">Password</label>
  <input type="password" name="password" id="password" ngModel>
​
  <button type="submit">Sign Up</button>
</form>
signup-form.component.ts
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
​
@Component({
  selector: 'app-signup-form',
  templateUrl: 'app/signup-form.component.html',
})
export class SignupFormComponent {
  registerUser(form: NgForm) {
    console.log(form.value);
    // {email: '...', password: '...'}
    // ...
  }
}
Getting Started
Nesting Form Data
Last modified 3yr ago
Copy link