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/

表单提供程序ngForm

1 个答案: