honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(forms): updated form examples to contain select elements

This commit is contained in:
vsavkin 2015-06-13 12:15:54 -07:00
parent f1541e65b3
commit c34cb01404
2 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
modules/examples/src/model_driven_forms/index.ts
View File

@ -1,4 +1,13 @@
import {bootstrap, onChange, NgIf, Component, Directive, View, Ancestor} from 'angular2/angular2';
import {
bootstrap,
onChange,
NgIf,
NgFor,
Component,
Directive,
View,
Ancestor
} from 'angular2/angular2';
import {formDirectives, NgControl, Validators, NgFormModel, FormBuilder} from 'angular2/forms';
import {RegExpWrapper, print, isPresent} from 'angular2/src/facade/lang';
@ -86,6 +95,13 @@ class ShowError {
<show-error control="lastName" [errors]="['required']"></show-error>
</p>
<p>
<label for="country">Country</label>
<select id="country" ng-control="country">
<option *ng-for="#c of countries" [value]="c">{{c}}</option>
</select>
</p>
<p>
<label for="creditCard">Credit Card</label>
<input type="text" id="creditCard" ng-control="creditCard">
@ -113,16 +129,18 @@ class ShowError {
<button type="submit" [disabled]="!f.form.valid">Submit</button>
</form>
`,
directives: [formDirectives, ShowError]
directives: [formDirectives, NgFor, ShowError]
})
class ModelDrivenForms {
form;
countries = ['US', 'Canada'];
constructor(fb: FormBuilder) {
this.form = fb.group({
"firstName": ["", Validators.required],
"middleName": [""],
"lastName": ["", Validators.required],
"country": ["Canada", Validators.required],
"creditCard": ["", Validators.compose([Validators.required, creditCardValidator])],
"amount": [0, Validators.required],
"email": ["", Validators.required],

22
modules/examples/src/template_driven_forms/index.ts
View File

@ -1,4 +1,13 @@
import {bootstrap, onChange, NgIf, Component, Directive, View, Ancestor} from 'angular2/angular2';
import {
bootstrap,
onChange,
NgIf,
NgFor,
Component,
Directive,
View,
Ancestor
} from 'angular2/angular2';
import {formDirectives, NgControl, Validators, NgForm} from 'angular2/forms';
import {RegExpWrapper, print, isPresent} from 'angular2/src/facade/lang';
@ -13,6 +22,7 @@ class CheckoutModel {
firstName: string;
middleName: string;
lastName: string;
country: string = "Canada";
creditCard: string;
amount: number;
@ -107,6 +117,13 @@ class ShowError {
<show-error control="lastName" [errors]="['required']"></show-error>
</p>
<p>
<label for="country">Country</label>
<select id="country" ng-control="country" [(ng-model)]="model.country">
<option *ng-for="#c of countries" [value]="c">{{c}}</option>
</select>
</p>
<p>
<label for="creditCard">Credit Card</label>
<input type="text" id="creditCard" ng-control="creditCard" [(ng-model)]="model.creditCard" required credit-card>
@ -134,10 +151,11 @@ class ShowError {
<button type="submit" [disabled]="!f.form.valid">Submit</button>
</form>
`,
directives: [formDirectives, CreditCardValidator, ShowError]
directives: [formDirectives, NgFor, CreditCardValidator, ShowError]
})
class TemplateDrivenForms {
model = new CheckoutModel();
countries = ['US', 'Canada'];
onSubmit() {
print("Submitting:");