1

我在使用 Angular 4 时遇到了很多困难（对我来说很新）......

我的问题：

我有一个表格，在这个表格中，用户可以添加一些新字段（当他点击 btn 时） - 它可以是任意数量的字段。为此，我在表单组件中生成了一个新组件（每次单击时）。

我在 ts 中有：

 export class FormComponent {
    @ViewChild('container', {read: ViewContainerRef}) container:ViewContainerRef;

    // this fires on click of the use which wants to add some fields
    public addComponent() {
    @Component({templateUrl: './pathToHtml'})
    class TemplateComponent {}
    @NgModule({declarations: [TemplateComponent], imports: [CommonModule, FormsModule]})
        class TemplateModule {}

        const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
        const factory = mod.componentFactories.find((comp) =>
            comp.componentType === TemplateComponent
        );
        const component = this.container.createComponent(factory);
        }
}

在 html 中，每个组件都有单独的模板 - FORM 组件和 TEMPLATE 组件。

表格中的样本：

<form action="" (ngSubmit)="save(configHeadersForm.form)" #configHeadersForm="ngForm">

 <input type="text" class="form-control" name="test" ngModel required/>
</form>

来自模板的样本：

 <input type="text" name="test2" ngModel>

如果我打印 form.value （我输入输入字段'asddffd'），在保存功能的表单类（在提交时触发并且应该有表单数据），我有：

 Object { "test": 'asddffd'}

所以只有来自 FORM 模板的值，而不是来自生成的组件（test2）的值。有什么想法，漂亮吗？:)

4

1 回答 1

0

为了让它以正确的方式工作，你必须实现ControlValueAccessor，或者另一个解决方法是创建一个指令，同时能够使用在你的子组件上驱动的模板。

@Directive({
   selector: '[provide-parent-form]',
   providers: [
   {
      provide: ControlContainer,
      useFactory: function (form: NgForm) {
        return form;
      },
      deps: [NgForm]
   }
 ]
})
export class ProvideParentForm {}

然后在您的组件上，您将使用如下指令（需要在 ngModel 之前位于模板的根目录）：

<div provide-parent-form>
   <input type="text" name="test2" ngModel>
</div>
于 2017-08-09T13:28:43.487 回答