Angular2:将表单上下文绑定到ngTemplateOutlet
Angular2: Bind form context to ngTemplateOutlet
我试图定义一个包含动态表单的组件(使用ReactiveForms),其中用户应该能够添加/删除控件。控件可以采用多种形式,并且必须在组件外部定义,所以我认为TemplateRef是最适合的。
我正在努力寻找一种方法来绑定外部定义的控件到内部表单,通过使用formControlName
下面是实现的开始:
// expandable.component.ts
[...]
@Component({
selector: 'expandable',
templateUrl: 'app/component/common/expandable/expandable.component.html',
styleUrls: ['app/component/common/expandable/expandable.component.css']
})
export class ExpandableComponent {
@ContentChild('childTemplate') childTemplate: TemplateRef<any>;
@Input() children: Array<any>;
public form: FormGroup;
constructor(private _changeDetector: ChangeDetectorRef,
private _formBuilder: FormBuilder) {
this.children = [];
}
public ngOnInit(): void {
this.form = this._formBuilder.group({
children: this._formBuilder.array([])
});
const arrayControl = <FormArray>this.form.controls['children'];
this.children.forEach(child => {
const group = this.initChildForm();
arrayControl.push(group);
});
}
private initChildForm(): AbstractControl {
return this._formBuilder.group({
key: ['Initial Key', [Validators.required]],
value: ['Initial Value', [Validators.required]]
});
}
public addChild(): void {
const control = <FormArray>this.form.controls['children'];
control.push(this.initChildForm());
this._changeDetector.detectChanges();
}
}
<!-- expandable.component.html -->
<form [formGroup]="form">
<div class="form-group">
<div formArrayName="children">
<div *ngFor="let child of form.controls.children.controls; let i=index">
<div [formGroupName]="i">
<template
[ngTemplateOutlet]="childTemplate"
[ngOutletContext]="{ $implicit: child }"></template>
</div>
</div>
</div>
</div>
<a (click)="addChild()">Add Child</a>
</form>
尝试从外部定义模板:
<expandable>
<template #childTemplate>
<input class="form-control"
formControlName="value" />
</template>
</expandable>
我天真地试图将formControlName绑定到从外部隐式传递的上下文,但没有运气,因为我得到"无法找到名称:'值'的控制"。理想情况下,我希望能够将formControlName绑定到expandable.component.html
中,但我也看不到这样做的方法。
对此有什么想法吗?
是的,这是可能的:
需要实现ngModel
和formControlName
注入的ControlValueAccessor
接口,如下所示:
@Directive({
selector: 'control',
providers: [
{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SwitchControlComponent}
]
})
export class SwitchControlComponent implements ControlValueAccessor {
isOn: boolean;
_onChange: (value: any) => void;
writeValue(value: any) {
this.isOn = !!value;
}
registerOnChange(fn: (value: any) => void) {
this._onChange = fn;
}
registerOnTouched() {}
toggle(isOn: boolean) {
this.isOn = isOn;
this._onChange(isOn);
}
}
html: <expandable>
<template #childTemplate>
<div [formGroup]="form">
<input control class="form-control"
formControlName="value" />
</template>
</div>
</expandable>
进一步阅读:
使用新的表单api,如果不添加额外的表单标签,就不能从子组件添加输入
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- 将事件处理程序绑定到任何可能的事件
- AngularJS指令只识别双向绑定类型
- Telerik rad组合框多列数据绑定
- 对API数据使用声明性绑定
- 如何销毁/删除/取消绑定SnapSVG.js
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 数据绑定:'系统Char'不包含名为'xxxxx'
- react组件中的绑定方法
- 如何将ngrepeat下的ngmodel绑定到$scope
- WinJS内联绑定语法
- ng绑定和ng href问题.ng href未从控制器加载数据
- 如何在动态创建的节点上绑定函数