# Bind ngModel controls to ngForm from parent component

This allows you to split a template-driven form on components.

Create `formProvider` directive to proxy `ngModel` injector from parent to child:

```typescript
import { Directive, SkipSelf, forwardRef } from '@angular/core';
import { ControlContainer, Form } from '@angular/forms';

@Directive({
  selector: '[formProvider]',
  providers: [
    {
      provide: ControlContainer,
      useFactory: (parent) => parent,
      deps: [[new SkipSelf(), ControlContainer]],
    }
  ]
})
export class FormProviderDirective {
}
```

Use it in a child component:

```html
<ng-container appFormProvider>
  <input name="inChild" [(ngModel)]="form.inChild">
</ng-container>
```

### Be aware

* Parent component should have `<form>` element. Child components should be inside of that element.
* Each `ngModel` should have unique `name` (can be an issue in cycles).