Angular（5）：可重用表单组件上的双向数据绑定？答案

【问题标题】：Angular(5): two-way data binding on reusable form component?Angular（5）：可重用表单组件上的双向数据绑定？
【发布时间】：2020-05-19 14:26:30
【问题描述】：

在 Angular(5) 中，我正在尝试为模板驱动的表单编写一组可重用的表单控件。它需要能够从父组件中获取模型并将其传递给元素以进行双向数据绑定。

这就是我所拥有的。

admin-panel.component.ts（父表单）

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
            }
    }
}

settings.component.html

对于下面的 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>

settings.component.ts

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;
}

【问题讨论】：

标签： javascript angular

【解决方案1】：

啊..愚蠢的错误。上面的代码确实可以进行一些小的更改。

首先，在admin-panel.component.ts中，替换一行

<settings name="settings" [(ngModel)]="preset.settings"></settings>

与

<settings name="settings" [(model)]="preset.settings"></settings>

在settings.component.ts中匹配输入变量是在正确的轨道上。

但是，它似乎不起作用，因为在我的表单中我有

[ngFormOptions]="{ updateOn: 'submit' }"，所以没有更新。删除它允许更新通过。

【讨论】：

【解决方案2】：

如果在任何组件上实现“ControlValueAccessor”，那么我们可以为您的自定义组件自动进行双向数据绑定。

实现here

【讨论】：