我有以下问题.我想使用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: `` }) export class FormTest1 { public input = { test: "" } }
但是,这不是:
import { Component, Input } from 'angular2/core'; import { FORM_DIRECTIVES } from 'angular/common'; @Component({ directives: [FORM_DIRECTIVES], template: ` ` }) export class FormInput { @Input() data; } @Component({ directives: [FormInput, FORM_DIRECTIVES], template: `` }) export class FormTest1 { public input = { test: "" } }
因此抛出:
EXCEPTION: No provider for t! (t -> t) in [null]
只要从输入中删除ngControl属性,错误就会消失,但父级中的表单不再接收有关输入的任何信息.如何将ngForm传递给子组件?
提前致谢.
这是一个小例子:
外形test.component.js
@Component({ selector: 'form-test', directives: [FormInput, FORM_DIRECTIVES], template: `` }) 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: ` ` }) 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/