feat(forms): support setting control name in ngModelOptions
This commit is contained in:
parent
5504ca1e38
commit
a191e9697c
|
@ -26,11 +26,10 @@ export const formControlBinding: any =
|
||||||
* two-way binding, use `[(ngModel)]` to ensure the model updates in
|
* two-way binding, use `[(ngModel)]` to ensure the model updates in
|
||||||
* both directions.
|
* both directions.
|
||||||
*
|
*
|
||||||
* ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview))
|
|
||||||
* ```typescript
|
* ```typescript
|
||||||
* @Component({
|
* @Component({
|
||||||
* selector: "search-comp",
|
* selector: "search-comp",
|
||||||
* directives: [FORM_DIRECTIVES],
|
* directives: [],
|
||||||
* template: `<input type='text' [(ngModel)]="searchQuery">`
|
* template: `<input type='text' [(ngModel)]="searchQuery">`
|
||||||
* })
|
* })
|
||||||
* class SearchComp {
|
* class SearchComp {
|
||||||
|
@ -55,7 +54,7 @@ export class NgModel extends NgControl implements OnChanges,
|
||||||
|
|
||||||
@Input('ngModel') model: any;
|
@Input('ngModel') model: any;
|
||||||
@Input() name: string;
|
@Input() name: string;
|
||||||
|
@Input('ngModelOptions') options: {name?: string};
|
||||||
@Output('ngModelChange') update = new EventEmitter();
|
@Output('ngModelChange') update = new EventEmitter();
|
||||||
|
|
||||||
constructor(@Optional() @Host() private _parent: ControlContainer,
|
constructor(@Optional() @Host() private _parent: ControlContainer,
|
||||||
|
@ -112,6 +111,8 @@ export class NgModel extends NgControl implements OnChanges,
|
||||||
}
|
}
|
||||||
|
|
||||||
private _checkName() {
|
private _checkName() {
|
||||||
|
if (this.options && this.options.name) this.name = this.options.name;
|
||||||
|
|
||||||
if (this._parent && !this.name) {
|
if (this._parent && !this.name) {
|
||||||
throw new BaseException(
|
throw new BaseException(
|
||||||
`Name attribute must be set if ngModel is used within a form.
|
`Name attribute must be set if ngModel is used within a form.
|
||||||
|
|
|
@ -16,6 +16,7 @@ import {ListWrapper} from '../../src/facade/collection';
|
||||||
import {PromiseWrapper} from '../../src/facade/promise';
|
import {PromiseWrapper} from '../../src/facade/promise';
|
||||||
|
|
||||||
export function main() {
|
export function main() {
|
||||||
|
// TODO(kara): Turn these tests on in CI when we flip the switch on new forms module
|
||||||
xdescribe('integration tests', () => {
|
xdescribe('integration tests', () => {
|
||||||
|
|
||||||
it('should initialize DOM elements with the given form object',
|
it('should initialize DOM elements with the given form object',
|
||||||
|
@ -1261,6 +1262,23 @@ export function main() {
|
||||||
});
|
});
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
it('should override name attribute with ngModelOptions name if provided',
|
||||||
|
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
|
||||||
|
const t = `
|
||||||
|
<form>
|
||||||
|
<input name="one" [(ngModel)]="data" [ngModelOptions]="{name: 'two'}">
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
|
||||||
|
tick();
|
||||||
|
fixture.debugElement.componentInstance.data = 'some data';
|
||||||
|
fixture.detectChanges();
|
||||||
|
const form = fixture.debugElement.children[0].inject(NgForm);
|
||||||
|
|
||||||
|
tick();
|
||||||
|
expect(form.value).toEqual({two: 'some data'});
|
||||||
|
})));
|
||||||
|
|
||||||
// TODO(kara): Fix when re-doing radio buttons
|
// TODO(kara): Fix when re-doing radio buttons
|
||||||
xit('should support <type=radio>',
|
xit('should support <type=radio>',
|
||||||
|
|
Loading…
Reference in New Issue