app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
app.component.html
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <form (ngSubmit)="onSubmit(myForm)" #myForm="ngForm"> <div id="user-data"> <div class="form-group"> <label for="username">Username</label> <input type="text" id="username" class="form-control" ngModel name="username"> </div> <button class="btn btn-default" type="button">Suggest an Username</button> <div class="form-group"> <label for="email">Mail</label> <input type="email" id="email" class="form-control" ngModel name="email"> </div> </div> <div class="form-group"> <label for="secret">Secret Questions</label> <select id="secret" class="form-control" ngModel name="secret"> <option value="pet">Your first Pet?</option> <option value="teacher">Your first teacher?</option> </select> </div> <button class="btn btn-primary" type="submit">Submit</button> </form> </div> </div> </div>
app.component.ts
import {Component} from '@angular/core'; import {NgForm} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { suggestUserName() { const suggestedName = 'Superuser'; } onSubmit(form: NgForm) { console.log(form); } }
References
https://angular.io/guide/forms