Form-Providers ngForm

Issue

I've got the following problem. I want to work with NG2 Forms. According to the angular 2 documentation, using the ngForm directive on the form and the ngControl directive on the input, the form should always have access to the validity of the input.
 
This works if the inputs are in the same component as the form, but as soon as I move the inputs into a child directive, they don't get the ngForm-Provider anymore.
 
This works:

import { Component, Input } from 'angular2/core';
import { FORM_DIRECTIVES } from 'angular/common';

@Component({
    directives: [FORM_DIRECTIVES],
    template: `
        <form #heroForm="ngForm">
            <input type="text"
                [(ngModel)]="input.test"
                ngControl="name">
        </form>
    `
})
export class FormTest1 {
    public input = {
        test: ""
    }
}

However, this doesn't:

import { Component, Input } from 'angular2/core';
import { FORM_DIRECTIVES } from 'angular/common';


@Component({
    directives: [FORM_DIRECTIVES],
    template: `
        <input *ngIf="data"
            [(ngModel)]="data.test"
            ngControl="name">
    `
})
export class FormInput {
    @Input() data;
}

@Component({
    directives: [FormInput, FORM_DIRECTIVES],
    template: `
        <form #heroForm="ngForm">
            <form-input
                [data]="input">
            </form-input>
        </form>
    `
})
export class FormTest1 {
    public input = {
        test: ""
    }
}

As this throws:

EXCEPTION: No provider for t! (t -> t) in [null]

As soon as I remove the ngControl-attribute from the input, the error disappears, but the form in the parent doesn't receive any information about the input anymore. How do I go about passing the ngForm down to the child component?
Thanks in advance.

Solution

Here's a little example:

form-test.component.js

    @Component({
    selector: 'form-test',
    directives: [FormInput, FORM_DIRECTIVES],
    template: `
        <form [ngFormModel]="heroForm">
            <br>Is Form Valid? - {{heroForm.valid}}<br>
            <br>Data: - {{input | json}}<br>
            <input type="text" [(ngModel)]="input.test1" required [ngFormControl]="heroForm.controls['test1']">
            <form-input [hForm]="heroForm" [data]="input">
            </form-input>
            <button type="submit">Submit</button>
        </form>
    `
})
export class FormTest1 {

    public heroForm:ControlGroup;

    constructor(private _builder:FormBuilder){
        this.heroForm = _builder.group({
            test1: ["", Validators.required],
            test2: ["", Validators.required]
        });
    }
    public input = {
        test1: "",
        test2: ""
    }
}

form-input-test.ts

@Component({
    selector: 'form-input',
    directives: [FORM_DIRECTIVES,NgForm],
    template: `
        <label>sdsd</label>
        <input type="text" [(ngModel)]="data.test2" [ngFormControl]="hForm.controls['test2']" required>
    `
})
export class FormInput {
    @Input() hForm:ControlGroup;
    @Input() data;
}

I did two things mainly:
1- you only have access to the form in the parent object not in the child, I added another input so you can pass it along.
2-There's two ways to create a ControlGroup, one is implicitly like the one you did with ngForm and ngControl, and the other one is explicitely like I did with ngFormModel and ngFormControl, the second one gives you more control over the form so you can you things like this.

I recommend you to read this link

Answered By - Langley