docs(aio): update migrated content from anguar.io
This commit is contained in:
Peter Bacon Darwin
committed by
Pete Bacon Darwin
Pete Bacon Darwin
parent
ff82756415
commit
fd72fad8fd
8
aio/content/examples/forms/src/app/app.component.ts
Normal file
8
aio/content/examples/forms/src/app/app.component.ts
Normal file
@ -0,0 +1,8 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: '<hero-form></hero-form>'
|
||||
})
|
||||
export class AppComponent { }
|
||||
20
aio/content/examples/forms/src/app/app.module.ts
Normal file
20
aio/content/examples/forms/src/app/app.module.ts
Normal file
@ -0,0 +1,20 @@
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { HeroFormComponent } from './hero-form.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroFormComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
210
aio/content/examples/forms/src/app/hero-form.component.html
Normal file
210
aio/content/examples/forms/src/app/hero-form.component.html
Normal file
@ -0,0 +1,210 @@
|
||||
<!-- #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, edit-div -->
|
||||
<div class="form-group">
|
||||
<!-- #docregion name-with-error-msg -->
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" id="name"
|
||||
required
|
||||
[(ngModel)]="model.name" name="name"
|
||||
#name="ngModel">
|
||||
<!-- #docregion hidden-error-msg -->
|
||||
<div [hidden]="name.valid || name.pristine"
|
||||
class="alert alert-danger">
|
||||
<!-- #enddocregion hidden-error-msg -->
|
||||
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" id="alterEgo"
|
||||
[(ngModel)]="model.alterEgo" name="alterEgo">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" id="power"
|
||||
required
|
||||
[(ngModel)]="model.power" name="power"
|
||||
#power="ngModel">
|
||||
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
|
||||
</select>
|
||||
<div [hidden]="power.valid || power.pristine" class="alert alert-danger">
|
||||
Power is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- #docregion submit-button -->
|
||||
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
|
||||
<!-- #enddocregion submit-button -->
|
||||
<!-- #docregion new-hero-button-form-reset -->
|
||||
<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
|
||||
<!-- #enddocregion new-hero-button-form-reset -->
|
||||
<!-- #enddocregion final -->
|
||||
<i>with</i> reset
|
||||
|
||||
|
||||
<!-- #docregion new-hero-button-no-reset -->
|
||||
<button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
|
||||
<!-- #enddocregion new-hero-button-no-reset -->
|
||||
<i>without</i> reset
|
||||
|
||||
<!-- NOT SHOWN IN DOCS -->
|
||||
<div>
|
||||
<hr>
|
||||
Name via form.controls = {{showFormControls(heroForm)}}
|
||||
</div>
|
||||
<!-- - -->
|
||||
<!-- #docregion final -->
|
||||
</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-primary" (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" id="name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control" id="alterEgo">
|
||||
</div>
|
||||
|
||||
<!-- #enddocregion start -->
|
||||
<!-- #docregion powers -->
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" id="power" required>
|
||||
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- #enddocregion powers -->
|
||||
<!-- #docregion start -->
|
||||
<button type="submit" class="btn btn-success">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" id="name"
|
||||
required
|
||||
[(ngModel)]="model.name" name="name">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control" id="alterEgo"
|
||||
[(ngModel)]="model.alterEgo" name="alterEgo">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" id="power"
|
||||
required
|
||||
[(ngModel)]="model.power" name="power">
|
||||
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- #enddocregion ngModel-2-->
|
||||
<button type="submit" class="btn btn-success">Submit</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- #enddocregion phase2-->
|
||||
|
||||
<!-- EXTRA MATERIAL FOR DOCUMENTATION -->
|
||||
<hr>
|
||||
<!-- #docregion ngModelName-1 -->
|
||||
<input type="text" class="form-control" id="name"
|
||||
required
|
||||
[(ngModel)]="model.name" name="name">
|
||||
TODO: remove this: {{model.name}}
|
||||
<!-- #enddocregion ngModelName-1 -->
|
||||
<hr>
|
||||
<!-- #docregion ngModel-3-->
|
||||
<input type="text" class="form-control" id="name"
|
||||
required
|
||||
[ngModel]="model.name" name="name"
|
||||
(ngModelChange)="model.name = $event">
|
||||
TODO: remove this: {{model.name}}
|
||||
<!-- #enddocregion ngModel-3-->
|
||||
<hr>
|
||||
<!-- #docregion ngModelName-2 -->
|
||||
<input type="text" class="form-control" id="name"
|
||||
required
|
||||
[(ngModel)]="model.name" name="name"
|
||||
#spy>
|
||||
<br>TODO: remove this: {{spy.className}}
|
||||
<!-- #enddocregion ngModelName-2 -->
|
||||
|
||||
</div>
|
||||
59
aio/content/examples/forms/src/app/hero-form.component.ts
Normal file
59
aio/content/examples/forms/src/app/hero-form.component.ts
Normal file
@ -0,0 +1,59 @@
|
||||
// #docplaster
|
||||
// #docregion , v1, final
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-form',
|
||||
templateUrl: './hero-form.component.html'
|
||||
})
|
||||
export class HeroFormComponent {
|
||||
|
||||
powers = ['Really Smart', 'Super Flexible',
|
||||
'Super Hot', 'Weather Changer'];
|
||||
|
||||
model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
|
||||
|
||||
// #docregion submitted
|
||||
submitted = false;
|
||||
|
||||
onSubmit() { this.submitted = true; }
|
||||
// #enddocregion submitted
|
||||
|
||||
// #enddocregion final
|
||||
// TODO: Remove this when we're done
|
||||
get diagnostic() { return JSON.stringify(this.model); }
|
||||
// #enddocregion v1
|
||||
|
||||
// #docregion final, new-hero
|
||||
newHero() {
|
||||
this.model = new Hero(42, '', '');
|
||||
}
|
||||
// #enddocregion final, new-hero
|
||||
|
||||
skyDog(): Hero {
|
||||
// #docregion SkyDog
|
||||
let myHero = new Hero(42, 'SkyDog',
|
||||
'Fetch any object at any distance',
|
||||
'Leslie Rollover');
|
||||
console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
|
||||
// #enddocregion SkyDog
|
||||
return myHero;
|
||||
}
|
||||
|
||||
//////// NOT SHOWN IN DOCS ////////
|
||||
|
||||
// Reveal in html:
|
||||
// Name via form.controls = {{showFormControls(heroForm)}}
|
||||
showFormControls(form: any) {
|
||||
return form && form.controls['name'] &&
|
||||
// #docregion form-controls
|
||||
form.controls['name'].value; // Dr. IQ
|
||||
// #enddocregion form-controls
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
|
||||
// #docregion v1, final
|
||||
}
|
||||
11
aio/content/examples/forms/src/app/hero.ts
Normal file
11
aio/content/examples/forms/src/app/hero.ts
Normal file
@ -0,0 +1,11 @@
|
||||
// #docregion
|
||||
export class Hero {
|
||||
|
||||
constructor(
|
||||
public id: number,
|
||||
public name: string,
|
||||
public power: string,
|
||||
public alterEgo?: string
|
||||
) { }
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user