Angular Can';t将控件动态添加到controlarray
当有人单击按钮时,我尝试向表单动态添加输入 我从官方文档中找到了这个例子: & 它与alpha.37一起工作,正如你在plunker中看到的那样 我已将其翻译为rc1: 组成部分:Angular Can';t将控件动态添加到controlarray,angular,control-array,Angular,Control Array,当有人单击按钮时,我尝试向表单动态添加输入 我从官方文档中找到了这个例子: & 它与alpha.37一起工作,正如你在plunker中看到的那样 我已将其翻译为rc1: 组成部分: import {FORM_DIRECTIVES, Location, Control, ControlGroup, ControlArray, Validators } from "@angular/common"; import {Component } from '@angular/core'; @Compon
import {FORM_DIRECTIVES, Location, Control, ControlGroup, ControlArray, Validators } from "@angular/common";
import {Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/partners/test.html',
directives: [FORM_DIRECTIVES]
})
export class TestTest {
ctrlFirst: Control = new Control('', Validators.required);
ctrlMiddle: Control = new Control('');
ctrlLast: Control = new Control('', Validators.required);
ctrlFood: Control = new Control('pizza', Validators.required);
ctrlCities: Control[] = [
new Control(''),
new Control(''),
new Control('')
];
citiesArray: ControlArray = new ControlArray(this.ctrlCities);
formGroup: ControlGroup = new ControlGroup({
name: new ControlGroup({
first: this.ctrlFirst,
middle: this.ctrlMiddle,
last: this.ctrlLast
}),
food: this.ctrlFood,
cities: this.citiesArray
});
get cgValue(): string {
return JSON.stringify(this.formGroup.value, null, 2);
}
addCity(): void {
this.citiesArray.push(new Control(''));
}
}
视图:
您可以添加如下控件:
您可以添加如下控件:
如果从
- 元素中删除[ngFormControl]=“cities”,代码将运行,但我无法从控件中检索值。我还尝试将[ngFormControl]替换为[ngControl]或[ngGroupControl],这没有什么区别。如果从
- 元素中删除[ngFormControl]=“cities”,代码将运行,但我无法从控件中检索值。我还尝试用[ngControl]或[ngGroupControl]替换[ngFormControl],这没有什么区别
<div>
<h2>Angular2 Control & ControlGroup Example</h2>
<form [ngFormModel]="formGroup">
<div [ngControlGroup]="name">
<h3>Enter your name:</h3>
<p>First: <input [ngControl]="first"><span *ngIf="!ctrlFirst.valid"> [required]</span></p>
<p>Middle: <input [ngControl]="middle"></p>
<p>Last: <input [ngControl]="last"><span *ngIf="!ctrlLast.valid"> [required]</span> </p>
</div>
<h3>What's your favorite food?</h3>
<p><input [ngControl]="food"><span *ngIf="!ctrlFood.valid"> [required]</span></p>
<h3>Name a few cities:</h3>
<ul [ngFormControl]="cities">
<li *ngFor="let ctrl of ctrlCities; let i = index"><input [ngControl]="i"></li>
</ul>
<button type="button" (click)="addCity()">Add a city</button>
</form>
<h3>Value:</h3>
<pre>{{ cgValue }}</pre>
<h3>Validity:</h3>
<pre>{{ formGroup.valid }}</pre>
</div>
EXCEPTION: Error in app/partners/test.html:3:13
browser_adapter.ts:78EXCEPTION: Error in app/partners/test.html:3:13BrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78ORIGINAL EXCEPTION: Cannot find control ''BrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78Error: Cannot find control ''
at new BaseException (exceptions.ts:14)
at _throwError (shared.ts:61)
at Object.setUpControlGroup (shared.ts:54)
at NgFormModel.addControlGroup (ng_form_model.ts:76)
at NgControlGroup.ngOnInit (ng_control_group.ts:39)
at DebugAppView._View_TestTest0.detectChangesInternal (TestTest.template.js:418)
at DebugAppView.AppView.detectChanges (view.ts:243)
at DebugAppView.detectChanges (view.ts:345)
at DebugAppView.AppView.detectViewChildrenChanges (view.ts:267)
at DebugAppView.AppView.detectChangesInternal (view.ts:256)BrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78DebugContextBrowserDomAdapter.logError @ browser_adapter.ts:78
zone.js:463 ViewWrappedException
this.foo = fb.group({
Data1: [""],
Data2: [""],
})
this.ControlGroup = new Control();
this.foo.addControl('Data3', this.ControlGroup);