2

I'm dynamically injecting a component (using @ViewChild and insert()) with form controls into a component that wraps it with a form tag (so that I can have many different form templates with the same form handling).

This all works fine, but now when I check form.valid, it's always valid because apparently, it doesn't see the form controls that are dynamically injected.

Can I somehow trigger a 'reinitialization' of the ngForm directive on the form so that it will know that there are additional form controls injected?

Note: I do realise by now that a better solution to this problem would probably be to use model driven forms, but right now it's too short notice to redo the whole thing.

Parent template:

<form #htmlFormElement="ngForm" novalidate>
    <div #dynamicComponentContainer></div>
    <!-- more buttons and shared form controls here -->
</form>

Child template E.g.:

<textarea name="comments" [(ngModel)]="formData.comments"></textarea>
mukesh krishnan
  • 353
  • 1
  • 6
  • 20
Jurgen
  • 343
  • 3
  • 13
  • It's usually a better approach to implement `ControlValueAccessor` in custom components that should be used in a form with `ngModel` – Günter Zöchbauer Feb 28 '17 at 11:00
  • It's not about custom components. I also have those. But this is about injecting a complete form (multiple components) and having those validated in the context of a parent components form tag – Jurgen Feb 28 '17 at 12:23

1 Answers1

1

You can set the viewProviders in the child component to use the existing NgForm as the ControlContainer.

This should automatically treat the form controls in the child component as if they are part of the parent component's form.

e.g:

@Component({
    selector: 'child-with-form-controls',
    templateUrl: './child-with-form-controls.component.html',
    viewProviders: [{ provide: ControlContainer, useExisting: NgForm}]
})
export class ChildWithFormControlsComponent {
    ...
}
itaya
  • 325
  • 4
  • 7