Получение данных формы из динамического компонента в Angular 4

Я много борюсь с Angular 4 (для меня он довольно новый)...

Моя проблема:

У меня есть форма, и в этой форме пользователь может добавить несколько новых полей (когда он нажимает кнопку) - и это может быть любое количество полей. Для этого я генерирую новый компонент в компоненте формы (при каждом клике).

у меня в тс:

 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>

В классе формы в функции save (которая срабатывает при отправке и должна иметь данные формы), если я печатаю form.value (я помещаю в поля ввода «asddffd»), у меня есть:

 Object { "test": 'asddffd'}

Таким образом, только значение из шаблона FORM, а не значение из сгенерированного компонента (test2). Есть идеи, пожалуйста? :)


angular angular2-forms angular4-forms
person Daniella    schedule 09.08.2017    source источник
comment
вы можете использовать реактивные формы и выполнить работу, я могу предложить вам изучить scotch.io/tutorials/ для лучшего понимания   -  person Vikhyath Maiya    schedule 09.08.2017
comment
@vikk, требование совершенно другое, поскольку это динамический компонент, а не динамические формы. Я предполагаю, что OP хочет создать конкретный компонент на основе другого варианта использования.   -  person penleychan    schedule 09.08.2017
comment
ой неправильно понял!   -  person Vikhyath Maiya    schedule 09.08.2017

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы заставить это работать правильно, вы должны реализовать 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>
person penleychan    schedule 09.08.2017