节日快乐的家伙,
请耐心等待,因为英语是我的第三语言。
我正在将一个JQuery驱动的应用程序移动到角度并陷入困境。有不同的报告相关模块依赖于日期,我想创建一个组件并导入到父组件。我的印象是调用子组件只是注入子组件模板中的任何内容,但我现在想(图片php的包含函数)。
The plunkr展示了我尝试过的基本安排。但基本上,我想在其他父组件中使用日期组件。对于例如在我的父组件中我有这个:
this.rForm = fb.group({
'processedon': fb.group ({
'datefilteroption' : [null, [Validators.required]],
'dateportion' : [null, []],
'date1': [null, []],
'date2': [null, []]
})
});
其中,处理过的孩子是我孩子形式中定义的元素。子组件hmtl模板包含与它们匹配的formControlName(date1,date2等)。我可以在同一输出中有更多的日期要求,因此可以扩展如下。这个想法是子组件保持不变,该组将用于从几乎任何地方操纵其组件。
this.rForm = fb.group({
'processedon': fb.group ({
'datefilteroption' : [null, [Validators.required]],
'dateportion' : [null, []],
'date1': [null, []],
'date2': [null, []]
}),
'paidbackon': fb.group ({
'datefilteroption' : [null, [Validators.required]],
'dateportion' : [null, []],
'date1': [null, []],
'date2': [null, []]
})
});
我现在得到的错误是“formControlName在使用子组件时必须与父formGroup指令一起使用”。我试图在子组件中创建一个formGroup,但这迫使我在表单中创建一个表单并且是错误的。
我希望我的问题很明确。
解决问题的最简单方法是在子组件的ControlContainer
数组中提供viewProviders
:
import { ControlContainer, FormGroupName } from '@angular/forms';
@Component({
selector: 'app-date-query',
templateUrl: './date-query.component.html',
...
viewProviders: [
{ provide: ControlContainer, useExisting: FormGroupName }
]
})
export class DateQueryComponent implements OnInit {
也可以看看