Learn TypeScript 3 by Building Web Applications

Template-based forms

Template-based forms are defined in templates, while the logic behind them is implemented in component classes. To be able to use them, you'll need to import the FormsModule module in your @NgModule decorator.

Here is an example taken from the official Angular documentation:

<div> 
  <label for="name">Name</label> 
  <input type="text" id="name" required 
    [(ngModel)]="model.name" name="name"> 
</div> 
 
<div> 
  <label for="alterEgo">Alter Ego</label> 
  <input type="text" id="alterEgo" [(ngModel)]="model.alterEgo" name="alterEgo"> 
</div> 
 
<div> 
  <label for="power">Hero Power</label> 
  <select id="power" required [(ngModel)]="model.power" name="power"> 
    <option *ngFor="let pow of powers" [value]="pow">{{ pow }}</option> 
  </select> 
</div>