Angular 8:formControlName 组件内的多个嵌套级别 [英] Angular 8: formControlName inside component multiple nested levels below
问题描述
使用此资源,我想在多个嵌套级别上实现 formControlName.
Using this resource, I want to implement formControlName up multiple nested levels.
Angular 2 - 组件内部的 formControlName
假设实际的 formGroup 位于子 formControlName 组件之上 3 个组件级别,
Say the actual formGroup lives 3 component levels above a child formControlName component,
ControlValueAccessor 如果父组件就在子组件旁边,则它起作用.然而,以上(祖父)形式的多个级别不起作用.
ControlValueAccessor works if the Parent component is right next to child. However multiple levels above (grandfather) form does not work.
是否有服务或多个输入/输出的替代方案?还是只有这些方法?
Is there an alternative to Service, or multiple input/outputs ? Or are these the only method?
A--> Component with formGroup
B---> Component container
C---> Component container
D ---> Component with FormControlName (should pass to Component A)
组件A会从类似的不同子组件中收集多个表单控件名称,
Component A will collect multiple form control names from different children components similar to this,
InputText.ts
export class InputTextComponent implements AfterViewInit, ControlValueAccessor {
@Input() disabled: boolean;
@Output() saveValue = new EventEmitter();
value: string;
onChange: () => void;
onTouched: () => void;
writeValue(value: any) {
this.value = value ? value : "";
}
registerOnChange(fn: any) {this.onChange = fn}
registerOnTouched(fn: any) {this.onTouched = fn}
setDisabledState(isDisabled) {this.disabled = isDisabled}
}
InputText.html
<input .. />
推荐答案
你可以考虑四个选项:
1) 使用 FormControlName 为您的组件提供 ControlContainer
d.component.ts
@Component({
...
viewProviders: [
{
provide: ControlContainer,
useExisting: FormGroupDirective
}
]
})
export class DComponent implements OnInit {
2) 创建提供 ControlContainer 的简单指令
@Directive({
selector: '[provideContainer]',
providers: [
{
provide: ControlContainer,
useExisting: FormGroupDirective
}
]
})
export class ProvideContainerDirective {
}
然后将此指令放置在您的节点层次结构顶部的某个位置
then place this directive somewhere at the top of nodes hierarchy in your
d.component.html
<ng-container provideContainer>
<input formControlName="someName">
</ng-container>
3) 使用 FormControlDirective 而不是 FormControlName 指令
FormControlDirective 需要 FormControl 要传递的实例
FormControlDirective requires FormControl instance to be passed
<input [formControl]="control">
您可以通过 DI 获取此实例:
You can get this instance either though DI:
d.component.ts
export class DComponent implements OnInit {
control;
constructor(private parentFormGroupDir: FormGroupDirective) { }
ngOnInit() {
this.control = this.parentFormGroupDir.control.get('someName');
}
或者使用一些服务来绑定你的组件.
or use some service that ties your components.
d.component.ts
export class DComponent implements OnInit {
control: FormControl;
constructor(private formService: FormService) { }
ngOnInit() {
this.control = this.formService.get('someName');
}
4) 将 FormGroup 作为 Input props 传递给孩子或通过 DI 或服务获取它,然后用 formGroup 指令包装输入 [formControlName]
d.component.html
<ng-container [formGroup]="formGroup">
<input formControlName="..."
</ng-container>
这篇关于Angular 8:formControlName 组件内的多个嵌套级别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!