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

2
modules/playground/src/bootstrap.ts
View File

@ -26,6 +26,7 @@
'index': 'index.js',
'@angular/core': '/packages-dist/core/bundles/core.umd.js',
'@angular/common': '/packages-dist/common/bundles/common.umd.js',
'@angular/forms': '/packages-dist/forms/bundles/forms.umd.js',
'@angular/compiler': '/packages-dist/compiler/bundles/compiler.umd.js',
'@angular/platform-browser':
'/packages-dist/platform-browser/bundles/platform-browser.umd.js',
@ -54,6 +55,7 @@
'@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
'@angular/router': {main: 'index.js', defaultExtension: 'js'},
'@angular/common': {main: 'index.js', defaultExtension: 'js'},
'@angular/forms': {main: 'index.js', defaultExtension: 'js'},
'@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
'@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
'@angular/upgrade': {main: 'index.js', defaultExtension: 'js'}

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);
}

3
modules/playground/src/order_management/index.ts
View File

@ -6,9 +6,10 @@
* found in the LICENSE file at https://angular.io/license
*/
import {FORM_DIRECTIVES, NgFor, NgIf} from '@angular/common';
import {NgFor, NgIf} from '@angular/common';
import {Component, EventEmitter, Injectable, Input, Output} from '@angular/core';
import {ListWrapper} from '@angular/core/src/facade/collection';
import {FORM_DIRECTIVES} from '@angular/forms';
import {bootstrap} from '@angular/platform-browser-dynamic';
/**

3
modules/playground/src/person_management/index.ts
View File

@ -6,8 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
import {FORM_DIRECTIVES, NgFor, NgIf} from '@angular/common';
import {NgFor, NgIf} from '@angular/common';
import {Component, Injectable} from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/forms';
import {bootstrap} from '@angular/platform-browser-dynamic';
/**

24
modules/playground/src/template_driven_forms/index.ts
View File

@ -6,12 +6,14 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ControlGroup, FORM_DIRECTIVES, NG_VALIDATORS, NgControl, NgFor, NgForm, NgIf, Validators} 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 {FORM_DIRECTIVES, FormGroup, NG_VALIDATORS, NgControl, NgForm, Validators} from '@angular/forms';
import {bootstrap} from '@angular/platform-browser-dynamic';
/**
* A domain model we are binding the form controls to.
*/
@ -79,8 +81,8 @@ class ShowError {
constructor(@Host() formDir: NgForm) { 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])) {
@ -106,49 +108,49 @@ class ShowError {
<form (ngSubmit)="onSubmit()" #f="ngForm">
<p>
<label for="firstName">First Name</label>
<input type="text" id="firstName" ngControl="firstName" [(ngModel)]="model.firstName" required>
<input type="text" id="firstName" name="firstName" [(ngModel)]="model.firstName" required>
<show-error control="firstName" [errors]="['required']"></show-error>
</p>
<p>
<label for="middleName">Middle Name</label>
<input type="text" id="middleName" ngControl="middleName" [(ngModel)]="model.middleName">
<input type="text" id="middleName" name="middleName" [(ngModel)]="model.middleName">
</p>
<p>
<label for="lastName">Last Name</label>
<input type="text" id="lastName" ngControl="lastName" [(ngModel)]="model.lastName" required>
<input type="text" id="lastName" name="lastName" [(ngModel)]="model.lastName" required>
<show-error control="lastName" [errors]="['required']"></show-error>
</p>
<p>
<label for="country">Country</label>
<select id="country" ngControl="country" [(ngModel)]="model.country">
<select id="country" name="country" [(ngModel)]="model.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" [(ngModel)]="model.creditCard" required credit-card>
<input type="text" id="creditCard" name="creditCard" [(ngModel)]="model.creditCard" required credit-card>
<show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error>
</p>
<p>
<label for="amount">Amount</label>
<input type="number" id="amount" ngControl="amount" [(ngModel)]="model.amount" required>
<input type="number" id="amount" name="amount" [(ngModel)]="model.amount" required>
<show-error control="amount" [errors]="['required']"></show-error>
</p>
<p>
<label for="email">Email</label>
<input type="email" id="email" ngControl="email" [(ngModel)]="model.email" required>
<input type="email" id="email" name="email" [(ngModel)]="model.email" required>
<show-error control="email" [errors]="['required']"></show-error>
</p>
<p>
<label for="comments">Comments</label>
<textarea id="comments" ngControl="comments" [(ngModel)]="model.comments">
<textarea id="comments" name="comments" [(ngModel)]="model.comments">
</textarea>
</p>

3
modules/playground/src/web_workers/todo/index_common.ts
View File

@ -6,8 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
import {FORM_DIRECTIVES, NgFor} from '@angular/common';
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/forms';
import {Store, Todo, TodoFactory} from './services/TodoStore';

1
modules/playground/src/web_workers/todo/loader.js
View File

@ -14,6 +14,7 @@ System.config({
'@angular/core': {main: 'index.js', defaultExtension: 'js'},
'@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
'@angular/common': {main: 'index.js', defaultExtension: 'js'},
'@angular/forms': {main: 'index.js', defaultExtension: 'js'},
'@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
'@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
'@angular/router': {main: 'index.js', defaultExtension: 'js'},