fix(form): Form directives are exportedAs 'ngForm' (was 'form')

fixes #5658

BREAKING CHANGE:

Before:

    <form #f="form">

After:

    <form #f="ngForm">

Closes #5709
This commit is contained in:
Victor Berchet 2015-12-08 11:17:39 -08:00
parent 80b025ae53
commit 8657ca4298
9 changed files with 15 additions and 15 deletions

View File

@ -37,8 +37,8 @@ const controlGroupProvider =
* template: ` * template: `
* <div> * <div>
* <h2>Angular2 Control &amp; ControlGroup Example</h2> * <h2>Angular2 Control &amp; ControlGroup Example</h2>
* <form #f="form"> * <form #f="ngForm">
* <div ng-control-group="name" #cg-name="form"> * <div ng-control-group="name" #cg-name="ngForm">
* <h3>Enter your name:</h3> * <h3>Enter your name:</h3>
* <p>First: <input ng-control="first" required></p> * <p>First: <input ng-control="first" required></p>
* <p>Middle: <input ng-control="middle"></p> * <p>Middle: <input ng-control="middle"></p>
@ -73,7 +73,7 @@ const controlGroupProvider =
selector: '[ng-control-group]', selector: '[ng-control-group]',
providers: [controlGroupProvider], providers: [controlGroupProvider],
inputs: ['name: ng-control-group'], inputs: ['name: ng-control-group'],
exportAs: 'form' exportAs: 'ngForm'
}) })
export class NgControlGroup extends ControlContainer implements OnInit, export class NgControlGroup extends ControlContainer implements OnInit,
OnDestroy { OnDestroy {

View File

@ -49,8 +49,8 @@ const controlNameBinding =
* selector: "login-comp", * selector: "login-comp",
* directives: [FORM_DIRECTIVES], * directives: [FORM_DIRECTIVES],
* template: ` * template: `
* <form #f="form" (submit)='onLogIn(f.value)'> * <form #f="ngForm" (submit)='onLogIn(f.value)'>
* Login <input type='text' ng-control='login' #l="form"> * Login <input type='text' ng-control='login' #l="ngForm">
* <div *ng-if="!l.valid">Login is invalid</div> * <div *ng-if="!l.valid">Login is invalid</div>
* *
* Password <input type='password' ng-control='password'> * Password <input type='password' ng-control='password'>
@ -93,7 +93,7 @@ const controlNameBinding =
bindings: [controlNameBinding], bindings: [controlNameBinding],
inputs: ['name: ngControl', 'model: ngModel'], inputs: ['name: ngControl', 'model: ngModel'],
outputs: ['update: ngModelChange'], outputs: ['update: ngModelChange'],
exportAs: 'form' exportAs: 'ngForm'
}) })
export class NgControlName extends NgControl implements OnChanges, export class NgControlName extends NgControl implements OnChanges,
OnDestroy { OnDestroy {

View File

@ -47,7 +47,7 @@ const formDirectiveProvider =
* <div> * <div>
* <p>Submit the form to see the data object Angular builds</p> * <p>Submit the form to see the data object Angular builds</p>
* <h2>NgForm demo</h2> * <h2>NgForm demo</h2>
* <form #f="form" (ng-submit)="onSubmit(f.value)"> * <form #f="ngForm" (ng-submit)="onSubmit(f.value)">
* <h3>Control group: credentials</h3> * <h3>Control group: credentials</h3>
* <div ng-control-group="credentials"> * <div ng-control-group="credentials">
* <p>Login: <input type="text" ng-control="login"></p> * <p>Login: <input type="text" ng-control="login"></p>
@ -84,7 +84,7 @@ const formDirectiveProvider =
'(submit)': 'onSubmit()', '(submit)': 'onSubmit()',
}, },
outputs: ['ngSubmit'], outputs: ['ngSubmit'],
exportAs: 'form' exportAs: 'ngForm'
}) })
export class NgForm extends ControlContainer implements Form { export class NgForm extends ControlContainer implements Form {
form: ControlGroup; form: ControlGroup;

View File

@ -79,7 +79,7 @@ const formControlBinding =
bindings: [formControlBinding], bindings: [formControlBinding],
inputs: ['form: ngFormControl', 'model: ngModel'], inputs: ['form: ngFormControl', 'model: ngModel'],
outputs: ['update: ngModelChange'], outputs: ['update: ngModelChange'],
exportAs: 'form' exportAs: 'ngForm'
}) })
export class NgFormControl extends NgControl implements OnChanges { export class NgFormControl extends NgControl implements OnChanges {
form: Control; form: Control;

View File

@ -100,7 +100,7 @@ const formDirectiveProvider =
inputs: ['form: ng-form-model'], inputs: ['form: ng-form-model'],
host: {'(submit)': 'onSubmit()'}, host: {'(submit)': 'onSubmit()'},
outputs: ['ngSubmit'], outputs: ['ngSubmit'],
exportAs: 'form' exportAs: 'ngForm'
}) })
export class NgFormModel extends ControlContainer implements Form, export class NgFormModel extends ControlContainer implements Form,
OnChanges { OnChanges {

View File

@ -52,7 +52,7 @@ const formControlBinding =
bindings: [formControlBinding], bindings: [formControlBinding],
inputs: ['model: ngModel'], inputs: ['model: ngModel'],
outputs: ['update: ngModelChange'], outputs: ['update: ngModelChange'],
exportAs: 'form' exportAs: 'ngForm'
}) })
export class NgModel extends NgControl implements OnChanges { export class NgModel extends NgControl implements OnChanges {
/** @internal */ /** @internal */

View File

@ -968,7 +968,7 @@ export function main() {
// {{x.valid}} used to crash because valid() tried to read a property // {{x.valid}} used to crash because valid() tried to read a property
// from form.control before it was set. This test verifies this bug is // from form.control before it was set. This test verifies this bug is
// fixed. // fixed.
var t = `<form><div ng-control-group="x" #x="form"> var t = `<form><div ng-control-group="x" #x="ngForm">
<input type="text" ng-control="test"></div>{{x.valid}}</form>`; <input type="text" ng-control="test"></div>{{x.valid}}</form>`;
var fixture: ComponentFixture; var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then( tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(

View File

@ -78,7 +78,7 @@ class ShowError {
template: ` template: `
<h1>Checkout Form (Model Driven)</h1> <h1>Checkout Form (Model Driven)</h1>
<form (ng-submit)="onSubmit()" [ng-form-model]="form" #f="form"> <form (ng-submit)="onSubmit()" [ng-form-model]="form" #f="ngForm">
<p> <p>
<label for="firstName">First Name</label> <label for="firstName">First Name</label>
<input type="text" id="firstName" ng-control="firstName"> <input type="text" id="firstName" ng-control="firstName">

View File

@ -100,7 +100,7 @@ class ShowError {
template: ` template: `
<h1>Checkout Form</h1> <h1>Checkout Form</h1>
<form (ng-submit)="onSubmit()" #f="form"> <form (ng-submit)="onSubmit()" #f="ngForm">
<p> <p>
<label for="firstName">First Name</label> <label for="firstName">First Name</label>
<input type="text" id="firstName" ng-control="firstName" [(ng-model)]="model.firstName" required> <input type="text" id="firstName" ng-control="firstName" [(ng-model)]="model.firstName" required>