使用formGroupName指令的父组件和子组件

Question

我有一个父组件，它有一个使用标准HTML输入的简单表单和一个自定义输入组件：

父组件：

<div [formGroup]="form">
<div formGroupName="test">
<input type="text" formControlName="testControl1">
<input type="text" formControlName="testControl2">
<my-input id="testControl3"></my-input> 
</div>

父组件表单定义：

this.form = this.formBuilder.group({
test:this.formBuilder.group({
testControl1:['1'],
testControl2:['2'],
testControl3:['3'],
})

子组件

@Component({
selector: 'my-input',
template: ' <input type="text" [formControlName]="id">',
})
export class MyInputComponent  { 
@Input() id: string;
}

对于前两个文本没有问题，它们按预期工作；我的自定义组件爆炸，出现以下错误：

ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
directive and pass it an existing FormGroup instance (you can create one in your class).

如何在组件中检索formGroupName="test"上下文？我需要通过FormGroup和FormGroupName吗？我错过了什么？

Answer 1

您需要使用ControlValueAccessor-在MyInputComponent中，将此提供程序添加到组件配置中

@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyInputComponent),
multi: true
}
]
})

此外，您的组件需要实现ControlValueAccessor，该方法属于该接口

export class InputComponent implements OnInit , ControlValueAccessor {
constructor() { }
ngOnInit(): void {
}
onChange: any = () => {}
onTouch: any = () => {}
writeValue(value: any){
}
registerOnChange(fn: any){
this.onChange = fn
}
registerOnTouched(fn: any){
this.onTouch = fn
}
}