Using Template Model Binding

One-Way Binding

If you need a form with default values, you can start using the value-binding syntax for ngModel.

app/signup-form.component.html

<form #signupForm="ngForm" (ngSubmit)="register(signupForm)">
  <label for="username">Username</label>
  <input type="text" name="username" id="username" [ngModel]="generatedUser">

  <label for="email">Email</label>
  <input type="email" name="email" id="email" ngModel>

  <button type="submit">Sign Up</button>
</form>

app/signup-form.component.ts

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

@Component({
  // ...
})
export class SignupFormComponent {
  generatedUser: string = generateUniqueUserID();

  register(form: NgForm) {
    console.log(form.value);
    // ...
  }
}

Two-Way Binding

While Angular assumes one-way binding by default, two-way binding is still available if you need it.

In order to have access to two-way binding in template-driven forms, use the “Banana-Box” syntax ([(ngModel)]="propertyName").

Be sure to declare all of the properties you will need on the component.

<form #signupForm="ngForm" (ngSubmit)="register(signupForm)">
  <label for="username">Username</label>
  <input type="text" name="username" id="username" [(ngModel)]="username">

  <label for="email">Email</label>
  <input type="email" name="email" id="email" [(ngModel)]="email">

  <button type="submit">Sign Up</button>
</form>

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

@Component({
  // ...
})
export class SignUpFormComponent {
  username: string = generateUniqueUserID();
  email = '';

  register(form: NgForm) {
    console.log(form.value.username);
    console.log(this.username);
    // ...
  }
}