我有以下问题 . 我想使用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传递给子组件?
提前致谢 .
1 回答
这是一个小例子:
外形test.component.js
形输入test.ts
我主要做了两件事:
1-您只能访问父对象中不在子项中的表单,我添加了另一个输入,以便您可以传递它 .
2 - 有两种方法可以创建一个ControlGroup,一种是隐式的,就像你用
ngForm
和ngControl
做的那样,另一种方式就像我用ngFormModel
和ngFormControl
那样明显,第二种方式可以让你更好地控制表格,这样就可以了你这样的事情 .我建议你阅读这个链接:http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/