表单提供程序ngForm

Question

我有以下问题.我想使用NG2 Forms.根据angular 2文档,使用表单上的ngForm指令和输入上的ngControl指令,表单应始终可以访问输入的有效性.
 
如果输入与表单位于同一组件中,则此方法有效,但只要将输入移动到子指令中,它们就不再获取ngForm-Provider.
 
这有效:

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: ""
    }
}

但是,这不是:

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: ""
    }
}

因此抛出:

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

只要从输入中删除ngControl属性,错误就会消失,但父级中的表单不再接收有关输入的任何信息.如何将ngForm传递给子组件？
提前致谢.

Answer 1

这是一个小例子:

外形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: ""
    }
}

形输入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;
}

我主要做了两件事:
1-您只能访问父对象中不在子节点中的表单,我添加了另一个输入,以便您可以传递它.
2,有两种方法来创建ControlGroup,一个是含蓄像你这样做的一个ngForm和ngControl,另一种是显式地像我一样用ngFormModel和ngFormControl,第二个给你更多的控制权形式,以便你可以在你这样的事情.

我建议你阅读这个链接:http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/