import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-sm-6">
<form #myForm="ngForm" novalidate>
<div class="form-group">
<label for="exampleInput">Username</label>
<input name="usernameManual" [ngModel]="myModel.username" (ngModelChange)="myModel.username = $event" required type="input" class="form-control" id="exampleInput" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInput">Username</label>
<input name="username" [(ngModel)]="myModel.username" required type="input" class="form-control" id="exampleInput" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select name="selectedItem" [(ngModel)]="myModel.selectedItem" class="form-control" id="exampleSelect1">
<option *ngFor="let item of myModel.items" [ngValue]="item">{{item.label}}</option>
</select>
</div>
<fieldset class="form-group">
<legend>Radio buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="selectedColor" class="form-check-input" [(ngModel)]="myModel.selectedColor" value="red"> Red
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="selectedColor" class="form-check-input" [(ngModel)]="myModel.selectedColor" value="green"> Green
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" name="selectedColor" class="form-check-input" [(ngModel)]="myModel.selectedColor" value="blue"> Blue
</label>
</div>
</fieldset>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" name="isChecked" [(ngModel)]="myModel.isChecked" class="form-check-input"> Check me out
</label>
</div>
<button type="submit" [disabled]="!myForm.valid" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6">
<pre class="highlight">{{myModel | json}}</pre>
<pre class="highlight">{{myForm.value | json}}</pre>
<pre class="highlight">{{myForm.valid | json}}</pre>
</div>
</div>
`
})
export class AppComponent implements OnInit {
myModel = {
username: 'poweruser',
items: [
{ id: 1, label: 'Item One' },
{ id: 2, label: 'Item Two' },
{ id: 3, label: 'Item Three' }
],
selectedItem: null,
selectedColor: 'red',
isChecked: true
}
ngOnInit() {
// Pre-select item
this.myModel.selectedItem = this.myModel.items[0];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
.pageheader {
padding: 2rem 15px;
color: #cdbfe3;
background-color: #563d7c;
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 3rem;
margin-bottom: 2rem;
text-align: left;
}
.highlight {
padding: 1rem;
margin: 1rem -15px;
background-color: #f7f7f9;
}
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<!-- Polyfill for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="https://cdn.rawgit.com/angular/angular.io/f2daab7/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<div class="pageheader">
<h1>NgModel</h1>
<p class="lead">Using NgModel in an Angular 2 application</p>
</div>
<div class="container">
<my-app>
Loading...
</my-app>
</div>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->