1

I have this component with this template: 

@Component({
    selector: 'form-component',
    template:`
        <form #form="ngForm" (ngSubmit)="formComponentSubmit(form)">
            <ng-container #tmlContainer></ng-container>
            <button type="submit">Component form submit</button>
        </form>`
})
export class FormComponent implements OnInit{
    @ViewChild('tmlContainer', {read: ViewContainerRef}) tmlContainer;
    @Input() templateIn: TemplateRef<any>;

    ngOnInit() {
        this.tmlContainer.insert(this.templateIn.createEmbeddedView(null));
    }

    formComponentSubmit(form) {
        console.log('Component', form)
    }
}

I need to know how can I get the input fields added into the TemplateRef and add it to my form.

//edit The input fields must exist only in the form of inside the component and not on the form that is in the main app.

You can check the example in this link: https://plnkr.co/edit/cWWxRUlMfR6ecNbga8Y7?p=preview

Rhino
  • 46
  • 5
  • Have you search on Google? https://blogs.ibs.com/2016/09/23/angular-2-templateref-usage/ Is it what you need? – KeyMaker00 Oct 25 '17 at 11:11
  • Here's your solution https://stackoverflow.com/questions/46849570/cloned-elements-cannot-be-submitted-in-angular4/46863758?noredirect=1 – yurzui Oct 25 '17 at 11:27
  • @KeyMaker00 Yes, I've googled it. The link you provided just teach how to use the ng-template and it's already working. The problem is about adding the input fields that this template has into my form. – Rhino Oct 25 '17 at 13:25
  • @yurzui Thanks! I'll try to implement the second case you said because the first one I can't use because the input fields must not be part of the form in the main application. – Rhino Oct 25 '17 at 13:29
  • I've forgotten to say that the input fields added in the template could not be added to the form in the main app. – Rhino Oct 25 '17 at 15:08
  • did u manage to solve it? @Rhino – Avij Feb 21 '18 at 18:38
  • Unfortunately not. I've tried a lot of things but no one really works so I had to give up. – Rhino Apr 04 '18 at 13:59

0 Answers0