Question

我和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，则会在提交时触发，并且应该有表单数据）（我输入了输入字段＆＃39; asddffd＆＃39; ），我有：

 Object { "test": 'asddffd'}

所以只有FORM模板的值，而不是生成的组件（test2）中的值。任何想法，非常好吗？：）

Answer 1

为了让您能够以正确的方式实现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>

从Angular 4中的动态组件获取表单数据

1 个答案: