feat(aio): copy example code from angular.io
This commit is contained in:
Peter Bacon Darwin
committed by
Igor Minar
Igor Minar
parent
3e34ba01bd
commit
1f3198cb50
11
aio/content/examples/forms/js/src/app/app.component.js
Normal file
11
aio/content/examples/forms/js/src/app/app.component.js
Normal file
@ -0,0 +1,11 @@
|
||||
// #docregion
|
||||
(function(app) {
|
||||
app.AppComponent = ng.core
|
||||
.Component({
|
||||
selector: 'my-app',
|
||||
template: '<hero-form></hero-form>'
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
})(window.app || (window.app = {}));
|
||||
19
aio/content/examples/forms/js/src/app/app.module.js
Normal file
19
aio/content/examples/forms/js/src/app/app.module.js
Normal file
@ -0,0 +1,19 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
(function(app) {
|
||||
app.AppModule =
|
||||
ng.core.NgModule({
|
||||
imports: [
|
||||
ng.platformBrowser.BrowserModule,
|
||||
ng.forms.FormsModule
|
||||
],
|
||||
declarations: [
|
||||
app.AppComponent,
|
||||
app.HeroFormComponent
|
||||
],
|
||||
bootstrap: [ app.AppComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
})(window.app || (window.app = {}));
|
||||
196
aio/content/examples/forms/js/src/app/hero-form.component.html
Normal file
196
aio/content/examples/forms/js/src/app/hero-form.component.html
Normal file
@ -0,0 +1,196 @@
|
||||
<!-- #docplaster -->
|
||||
<!-- #docregion final -->
|
||||
<div class="container">
|
||||
<!-- #docregion edit-div -->
|
||||
<div [hidden]="submitted">
|
||||
<h1>Hero Form</h1>
|
||||
<!-- #docregion ngSubmit -->
|
||||
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
|
||||
<!-- #enddocregion ngSubmit -->
|
||||
<!-- #enddocregion edit-div -->
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<!-- #docregion name-with-error-msg -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name"
|
||||
name="name" #name="ngModel" >
|
||||
<div [hidden]="name.valid" class="alert alert-danger">
|
||||
Name is required
|
||||
</div>
|
||||
<!-- #enddocregion name-with-error-msg -->
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control"
|
||||
[(ngModel)]="model.alterEgo"
|
||||
name="alterEgo" >
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required
|
||||
[(ngModel)]="model.power"
|
||||
name="power" #power="ngModel" >
|
||||
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
<div [hidden]="power.valid" class="alert alert-danger">
|
||||
Power is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- #docregion submit-button -->
|
||||
<button type="submit" class="btn btn-default"
|
||||
[disabled]="!heroForm.form.valid">Submit</button>
|
||||
<!-- #enddocregion submit-button -->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- #docregion submitted -->
|
||||
<div [hidden]="!submitted">
|
||||
<h2>You submitted the following:</h2>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Name</div>
|
||||
<div class="col-xs-9 pull-left">{{ model.name }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Alter Ego</div>
|
||||
<div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Power</div>
|
||||
<div class="col-xs-9 pull-left">{{ model.power }}</div>
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-default" (click)="submitted=false">Edit</button>
|
||||
</div>
|
||||
<!-- #enddocregion submitted -->
|
||||
</div>
|
||||
<!-- #enddocregion final -->
|
||||
|
||||
<!-- ==================================================== -->
|
||||
<div>
|
||||
<form>
|
||||
<!-- #docregion edit-div -->
|
||||
|
||||
<!-- ... all of the form ... -->
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- #enddocregion edit-div -->
|
||||
|
||||
<!-- ==================================================== -->
|
||||
<hr>
|
||||
<!-- #docregion phase1-->
|
||||
<style>
|
||||
.no-style .ng-valid {
|
||||
border-left: 1px solid #CCC
|
||||
}
|
||||
|
||||
.no-style .ng-invalid {
|
||||
border-left: 1px solid #CCC
|
||||
}
|
||||
</style>
|
||||
<div class="no-style" style="margin-left: 4px">
|
||||
<!-- #docregion start -->
|
||||
<div class="container">
|
||||
<h1>Hero Form</h1>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- #enddocregion start -->
|
||||
<!-- #docregion powers -->
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required>
|
||||
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- #enddocregion powers -->
|
||||
<!-- #docregion start -->
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- #enddocregion start -->
|
||||
<!-- #enddocregion phase1-->
|
||||
|
||||
<!-- ==================================================== -->
|
||||
<hr>
|
||||
<!-- #docregion phase2-->
|
||||
<div class="container">
|
||||
<h1>Hero Form</h1>
|
||||
<form>
|
||||
<!-- #docregion ngModel-2-->
|
||||
{{diagnostic()}}
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name" name="name" >
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control"
|
||||
[(ngModel)]="model.alterEgo" name="alterEgo">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required
|
||||
[(ngModel)]="model.power" name="power">
|
||||
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- #enddocregion ngModel-2-->
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- #enddocregion phase2-->
|
||||
|
||||
<!-- EXTRA MATERIAL FOR DOCUMENTATION -->
|
||||
<hr>
|
||||
<!-- #docregion ngModel-1-->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name" >
|
||||
TODO: remove this: {{model.name}}
|
||||
<!-- #enddocregion ngModel-1-->
|
||||
<hr>
|
||||
<!-- #docregion ngModel-3-->
|
||||
<input type="text" class="form-control" required
|
||||
[ngModel]="model.name"
|
||||
(ngModelChange)="model.name = $event" >
|
||||
TODO: remove this: {{model.name}}
|
||||
<!-- #enddocregion ngModel-3-->
|
||||
<hr>
|
||||
<form>
|
||||
<!-- #docregion ngModelName-1 -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name"
|
||||
name="name" >
|
||||
<!-- #enddocregion ngModelName-1 -->
|
||||
<hr>
|
||||
<!-- #docregion ngModelName-2 -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name"
|
||||
name="name" #spy >
|
||||
<br>TODO: remove this: {{spy.className}}
|
||||
<!-- #enddocregion ngModelName-2 -->
|
||||
</form>
|
||||
|
||||
<div>
|
||||
<hr>
|
||||
Name via form.controls = {{showFormControls(heroForm)}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
52
aio/content/examples/forms/js/src/app/hero-form.component.js
Normal file
52
aio/content/examples/forms/js/src/app/hero-form.component.js
Normal file
@ -0,0 +1,52 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion first, final
|
||||
(function(app) {
|
||||
app.HeroFormComponent = ng.core
|
||||
.Component({
|
||||
selector: 'hero-form',
|
||||
templateUrl: 'app/hero-form.component.html'
|
||||
})
|
||||
.Class({
|
||||
// #docregion submitted
|
||||
constructor: [function() {
|
||||
// #enddocregion submitted
|
||||
this.powers = ['Really Smart', 'Super Flexible',
|
||||
'Super Hot', 'Weather Changer'
|
||||
];
|
||||
|
||||
this.model = new app.Hero(18, 'Dr IQ', this.powers[0],
|
||||
'Chuck Overstreet');
|
||||
|
||||
// #docregion submitted
|
||||
this.submitted = false;
|
||||
}],
|
||||
onSubmit: function() {
|
||||
this.submitted = true;
|
||||
},
|
||||
// #enddocregion submitted
|
||||
|
||||
// #enddocregion final
|
||||
// TODO: Remove this when we're done
|
||||
diagnostic: function() {
|
||||
return JSON.stringify(this.model);
|
||||
},
|
||||
// #enddocregion first
|
||||
|
||||
|
||||
//////// DO NOT SHOW IN DOCS ////////
|
||||
|
||||
// Reveal in html:
|
||||
// AlterEgo via form.controls = {{showFormControls(hf)}}
|
||||
showFormControls: function(form) {
|
||||
return form.controls['alterEgo'] &&
|
||||
// #docregion form-controls
|
||||
form.controls['name'].value; // Dr. IQ
|
||||
// #enddocregion form-controls
|
||||
},
|
||||
/////////////////////////////
|
||||
|
||||
// #docregion first, final
|
||||
});
|
||||
})(window.app || (window.app = {}));
|
||||
// #enddocregion first, final
|
||||
11
aio/content/examples/forms/js/src/app/hero.js
Normal file
11
aio/content/examples/forms/js/src/app/hero.js
Normal file
@ -0,0 +1,11 @@
|
||||
// #docregion
|
||||
(function(app) {
|
||||
app.Hero = Hero;
|
||||
|
||||
function Hero(id, name, power, alterEgo) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.power = power;
|
||||
this.alterEgo = alterEgo;
|
||||
}
|
||||
})(window.app || (window.app = {}));
|
||||
9
aio/content/examples/forms/js/src/forms.css
Normal file
9
aio/content/examples/forms/js/src/forms.css
Normal file
@ -0,0 +1,9 @@
|
||||
/* #docregion */
|
||||
.ng-valid[required] {
|
||||
border-left: 5px solid #42A948; /* green */
|
||||
}
|
||||
|
||||
.ng-invalid {
|
||||
border-left: 5px solid #a94442; /* red */
|
||||
}
|
||||
/* #enddocregion */
|
||||
47
aio/content/examples/forms/js/src/index.html
Normal file
47
aio/content/examples/forms/js/src/index.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- #docplaster -->
|
||||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Hero Form</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- #docregion bootstrap -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
|
||||
<!-- #enddocregion bootstrap -->
|
||||
<!-- #docregion styles -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="forms.css">
|
||||
<!-- #enddocregion styles -->
|
||||
|
||||
<!-- IE required polyfill -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
|
||||
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
|
||||
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
|
||||
<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
|
||||
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
|
||||
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
|
||||
|
||||
<!-- #docregion scripts-hero, scripts-hero-form -->
|
||||
<script src='app/hero.js'></script>
|
||||
<!-- #enddocregion scripts-hero -->
|
||||
<script src='app/hero-form.component.js'></script>
|
||||
<!-- #enddocregion scripts-hero-form -->
|
||||
<!-- #docregion scripts, scripts-hero, scripts-hero-form -->
|
||||
<script src='app/app.component.js'></script>
|
||||
<script src='app/app.module.js'></script>
|
||||
<script src='main.js'></script>
|
||||
<!-- #enddocregion scripts, scripts-hero, scripts-hero-form -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
8
aio/content/examples/forms/js/src/main.js
Normal file
8
aio/content/examples/forms/js/src/main.js
Normal file
@ -0,0 +1,8 @@
|
||||
// #docregion
|
||||
(function(app) {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
ng.platformBrowserDynamic
|
||||
.platformBrowserDynamic()
|
||||
.bootstrapModule(app.AppModule);
|
||||
});
|
||||
})(window.app || (window.app = {}));
|
||||
Reference in New Issue
Block a user