Angular(5)：可重用表單組件上的雙向數據綁定？

Question

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

Answer 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' }" ，所以沒有更新。 刪除允許更新通過。

Answer 2

如果在任何組件上實現“ ControlValueAccessor ”，那么我們可以為您的自定義組件自動進行雙向數據綁定。

在這里實現