forms - 表单提供者 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-attribute，错误就会消失，但父级中的表单不再收到有关输入的任何信息。我该如何将 ngForm 传递给子组件？
提前致谢。

Answer 1

举个例子:

表单测试.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: ""
    }
}

表单输入测试.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，第二个让您可以更好地控制表单，这样您就可以做这样的事情。

我推荐你阅读这篇 link