如何解决如何在带有反应形式的表单标签内进行动态输入
我正在尝试使用动态输入来创建反应形式
所以我创建了这样的反应形式组件
main_component.ts
constructor(private formBuilder: FormBuilder) {
this.operationGroupForm = this.formBuilder.group({
'operation': '','searchTerm': ''
});
}
main_component.html
<form [formGroup]="operationGroupForm">
<input type="text" formControlName="operation">
<div operationClass [type]="'mycustomtype'"
[_formControlName]="'searchTerm'"></div>
</div>
</form>
并创建了附加到div的指令operationClass
,并将组件注入div
operationClass.directive.ts
constructor(private el: ElementRef,private render: Renderer2,private viewContainerRef: ViewContainerRef,private componentFactory: ComponentFactoryResolver) {}
ngOnInit(): void {
var comRef = this.componentFactory.resolveComponentFactory(input_component);
var _comRef = this.viewContainerRef.createComponent(comRef);
_comRef.instance.formControlName = this._formControlName;
_comRef.instance.type = this.type;
}
,该组件通过采用formControlName
和type
来呈现正确的输入,并在自定义条件下呈现输入
,用于呈现输入的组件是: input_component.ts
@Input() formControlName: string;
@Input() type: string;
constructor() {
}
ngOnInit(): void {
}
input_component.html
<ng-container *ngIf="type">
<ng-container [ngSwitch]="type">
<ng-container *ngSwitchCase="'mycustomtype'">
<input type="text" [formControlName]="formControlName" class="form-control" />
</ng-container>
<ng-container *ngSwitchDefault>
<input type="number" [formControlName]="formControlName" class="form-control" />
</ng-container>
</ng-container>
</ng-container>
问题是,因为我认为内部输入formControlName
无法看到外部formGroup
,因为它会产生该错误
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).
Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.controlParentException (forms.js:1692)
at FormControlName._checkParentType (forms.js:6059)
at FormControlName._setUpControl (forms.js:6063)
at FormControlName.ngOnChanges (forms.js:5995)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2131)
at callHook (core.js:3042)
at callHooks (core.js:3008)
at executeInitAndCheckHooks (core.js:2960)
at refreshView (core.js:7331)
at refreshEmbeddedViews (core.js:8408)
解决方法
请考虑将以下更改应用于您的代码:
main_component.ts
每个控件名称的值是一个数组,其中包含初始值作为数组中的第一项。 (Angular Docs)
constructor(private formBuilder: FormBuilder) {
this.operationGroupForm = this.formBuilder.group({
'operation': [''],// <== provide an array
'searchTerm': [''] // <== provide an array
});
}
input_component.ts
由于formControlName
必须与父formGroup
指令一起使用,因此您需要添加formGroup
指令并将其传递给formGroup
实例,而不是传递{您可以沿{1}}实例使用ControlContainer将其注入子组件,如下所示:
formGroup
input_component.html
import { FormGroup,ControlContainer } from '@angular/forms';
...
@Input() formControlName: string;
@Input() type: string;
public formGroup: FormGroup;
constructor(public controlContainer: ControlContainer) { // <== inject reference to formGroup via ElementInjector
this.formGroup = controlContainer.control as FormGroup
}
For further information about FormContainer
,好像您在使用控件的组件和类(即 input.component。{ts | html} )中缺少FormGroup
指令和实例化。
类似的东西:
this.myFormGroup = new FormGroup({
formControlName: new FormControl()
});
请参阅Angular文档中的Create a FormGroup instance部分。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。