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:
parent
80b025ae53
commit
8657ca4298
@ -37,8 +37,8 @@ const controlGroupProvider =
|
|||||||
* template: `
|
* template: `
|
||||||
* <div>
|
* <div>
|
||||||
* <h2>Angular2 Control & ControlGroup Example</h2>
|
* <h2>Angular2 Control & 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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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 */
|
||||||
|
@ -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(
|
||||||
|
@ -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">
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user