cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(forms): remove deprecated forms APIs (#10624)

Browse Source 
BREAKING CHANGE:

The deprecated forms APIs in @angular/common have been removed. Please update to the new forms API in @angular/forms. See angular.io for more information.
This commit is contained in:
Kara
2016-08-11 20:40:46 -07:00
committed by vikerman
parent 3466232f8b
commit 7606c96c80
49 changed files with 52 additions and 6818 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
modules/playground/src/model_driven_forms/index.html
View File

@ -10,9 +10,9 @@
</head>
<body>
<model-driven-forms>
<reactive-forms>
Loading...
</model-driven-forms>
</reactive-forms>
<script src="../bootstrap.js"></script>
</body>

39
modules/playground/src/model_driven_forms/index.ts
View File

@ -6,13 +6,14 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ControlGroup, FORM_DIRECTIVES, FormBuilder, NgFor, NgFormModel, NgIf, Validators} from '@angular/common';
import {AbstractControl} from '@angular/common';
import {NgFor, NgIf} from '@angular/common';
import {Component, Directive, Host} from '@angular/core';
import {isPresent, print} from '@angular/core/src/facade/lang';
import {AbstractControl, FormBuilder, FormGroup, FormGroupDirective, REACTIVE_FORM_DIRECTIVES, Validators} from '@angular/forms';
import {bootstrap} from '@angular/platform-browser-dynamic';
/**
* Custom validator.
*/
@ -52,11 +53,11 @@ class ShowError {
controlPath: string;
errorTypes: string[];
constructor(@Host() formDir: NgFormModel) { this.formDir = formDir; }
constructor(@Host() formDir: FormGroupDirective) { this.formDir = formDir; }
get errorMessage(): string {
var form: ControlGroup = this.formDir.form;
var control = form.find(this.controlPath);
var form: FormGroup = this.formDir.form;
var control = form.get(this.controlPath);
if (isPresent(control) && control.touched) {
for (var i = 0; i < this.errorTypes.length; ++i) {
if (control.hasError(this.errorTypes[i])) {
@ -75,66 +76,66 @@ class ShowError {
@Component({
selector: 'model-driven-forms',
selector: 'reactive-forms',
viewProviders: [FormBuilder],
template: `
<h1>Checkout Form (Model Driven)</h1>
<h1>Checkout Form (Reactive)</h1>
<form (ngSubmit)="onSubmit()" [ngFormModel]="form" #f="ngForm">
<form (ngSubmit)="onSubmit()" [formGroup]="form" #f="ngForm">
<p>
<label for="firstName">First Name</label>
<input type="text" id="firstName" ngControl="firstName">
<input type="text" id="firstName" formControlName="firstName">
<show-error control="firstName" [errors]="['required']"></show-error>
</p>
<p>
<label for="middleName">Middle Name</label>
<input type="text" id="middleName" ngControl="middleName">
<input type="text" id="middleName" formControlName="middleName">
</p>
<p>
<label for="lastName">Last Name</label>
<input type="text" id="lastName" ngControl="lastName">
<input type="text" id="lastName" formControlName="lastName">
<show-error control="lastName" [errors]="['required']"></show-error>
</p>
<p>
<label for="country">Country</label>
<select id="country" ngControl="country">
<select id="country" formControlName="country">
<option *ngFor="let c of countries" [value]="c">{{c}}</option>
</select>
</p>
<p>
<label for="creditCard">Credit Card</label>
<input type="text" id="creditCard" ngControl="creditCard">
<input type="text" id="creditCard" formControlName="creditCard">
<show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
</p>
<p>
<label for="amount">Amount</label>
<input type="number" id="amount" ngControl="amount">
<input type="number" id="amount" formControlName="amount">
<show-error control="amount" [errors]="['required']"></show-error>
</p>
<p>
<label for="email">Email</label>
<input type="email" id="email" ngControl="email">
<input type="email" id="email" formControlName="email">
<show-error control="email" [errors]="['required']"></show-error>
</p>
<p>
<label for="comments">Comments</label>
<textarea id="comments" ngControl="comments">
<textarea id="comments" formControlName="comments">
</textarea>
</p>
<button type="submit" [disabled]="!f.form.valid">Submit</button>
</form>
`,
directives: [FORM_DIRECTIVES, NgFor, ShowError]
directives: [REACTIVE_FORM_DIRECTIVES, NgFor, ShowError]
})
class ModelDrivenForms {
class ReactiveForms {
form: any /** TODO #9100 */;
countries = ['US', 'Canada'];
@ -158,5 +159,5 @@ class ModelDrivenForms {
}
export function main() {
bootstrap(ModelDrivenForms);
bootstrap(ReactiveForms);
}