[英]Angular(5): two-way data binding on reusable form component?
在 Angular(5) 中,我试图为模板驱动的表单编写一组可重用的表单控件。 它需要能够从父组件获取模型并将其传递给元素以进行双向数据绑定。
这就是我所拥有的。
import { Component, OnInit } from '@angular/core';
import{ NgForm } from '@angular/forms';
@Component({
selector: 'admin-panel',
template: `
<label>Settings</label>
<!-- the below doesn't work, but is an example of how I'd like to use it -->
<settings name="settings" [(ngModel)]="preset.settings"></settings>
`
})
export class AdminPanelComponent implements OnInit
{
preset;
ngOnInit()
{
this.preset = {
name: '',
settings: {
settingOne: 'foo',
settingTwo: false,
settingThree: 14
}
}
}
对于下面的 ngModels,我也尝试将其设置为model.settingOne
、 model.settingTwo
,但这也不起作用。
<div [ngModelGroup]="group">
<select name="settingOne" [(ngModel)]="model.settingOne">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
<input type="checkbox" name="settingTwo" [(ngModel)]="model.settingTwo">
</div>
import { Component, Input } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'settings',
templateUrl: './settings.component.html',
viewProviders:[{provide: ControlContainer, useExisting: NgForm}]
})
export class SettingsComponent
{
@Input('name') group: string;
//@Input('model') model;
}
啊。。愚蠢的错误。 上面的代码确实可以进行一些小的更改。
首先,在admin-panel.component.ts 中,替换该行
<settings name="settings" [(ngModel)]="preset.settings"></settings>
和
<settings name="settings" [(model)]="preset.settings"></settings>
匹配settings.component.ts中的输入变量是在正确的轨道上。
但是,它似乎不起作用,因为在我的形式中我有
[ngFormOptions]="{ updateOn: 'submit' }"
,所以没有更新。 删除允许更新通过。
如果在任何组件上实现“ ControlValueAccessor ”,那么我们可以为您的自定义组件自动进行双向数据绑定。
在这里实现
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.