![找不到名称的控件]( "找不到名称的控件")
本文介绍了找不到名称的控件:的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个非常复杂的表单，我想将其分解为单个组件.这是我的基本表单(仅采用示例字段)，我正在使用 FormBuilder:
ngOnInit() {this.predictorQuestion = this.fb.group({问题:['', Validators.required],选项:this.fb.array([this.fb.control('', Validators.required),]),meta_options: this.fb.group({test_type: ['', Validators.required],})});获取元选项(){返回 this.predictorQuestion.get('meta_options') 作为 FormGroup;}获取选项(){返回 this.predictorQuestion.get('options') 作为 FormArray;}
如果我尝试将其连接到我的模板，它会完美运行:
<mat-form-field fxFlex外观=轮廓"><mat-label>问题</mat-label><input matInput formControlName="问题"></mat-form-field><div fxLayoutAlign="space-between center"><h3>选项</h3><button (click)="addOption()" matTooltip="添加选项" matTooltipPosition="right" mat-mini-fab type="button"><mat-icon>add</mat-icon>
<div formArrayName="options" fxLayout="column"><div *ngFor="let answer of options.controls; let i = index" fxLayout="row" fxLayoutAlign="space-between stretch"><mat-form-field appearance="outline" fxFlex><mat-label>Option {{ i+1 }} </mat-label><input fxFlex matInput [formControlName]="i"></mat-form-field><button mat-icon-button matTooltip="删除这个选项" matTooltipPosition="right" (click)="removeOption(i)"><mat-icon>关闭</mat-icon>
<div formGroupName="meta_options" fxLayoutAlign="space-between" fxLayoutGap="20px" fxLayout="column"><mat-form-field fxFlex="25"><mat-select formControlName="test_type"><mat-option *ngFor="let vtype of vtypes" value="{{ vtype.value }}">{{ vtype.name }}</mat-option></mat-select></mat-form-field>
</表单>
此渲染没有任何错误.
如果我尝试以如下方式分解 meta_options.test_type 自己的组件:
component.ts
@Input() parent_form: FormGroup;公共 vtypes: Array;构造函数(私人FB:FormBuilder){this.vtypes = [{name: '时间戳',值:'时间戳'},{name: '结束',值:'结束'}];}
component.html
<mat-select formControlName="test_type"><mat-option *ngFor="let vtype of vtypes" value="{{ vtype.value }}">{{ vtype.name }}</mat-option></mat-select></mat-form-field>
并在我的主要父表单中使用这个组件
<meta-option-value [parent_form]="predictorQuestion"></meta-option-value>
我收到以下错误:
找不到名称为'test_type'的控件"
我在这里遗漏了什么?
解决方案
您正在将完整的 FormGroup (predictorQuestion) 传递给孩子.您只需要将 predictorQuestion.get('meta_types') 作为 [parent_form]="predictorQuestion.get('meta_types')"parent_form/代码>.
I have a quite complicated form which I want to break down into individual components. Here is my base form (only taken example fields), I'm using FormBuilder:
ngOnInit() {
this.predictorQuestion = this.fb.group({
question: ['', Validators.required],
options: this.fb.array([
this.fb.control('', Validators.required),
]),
meta_options: this.fb.group({
test_type: ['', Validators.required],
})
});
get meta_options() {
return this.predictorQuestion.get('meta_options') as FormGroup;
}
get options() {
return this.predictorQuestion.get('options') as FormArray;
}
If I try to connect this to my templates, it works perfectly:
<form [formGroup]="predictorQuestion" fxLayout="column">
<mat-form-field fxFlex appearance="outline">
<mat-label>Question</mat-label>
<input matInput formControlName="question">
</mat-form-field>
<div fxLayoutAlign="space-between center">
<h3>Options</h3>
<button (click)="addOption()" matTooltip="Add option" matTooltipPosition="right" mat-mini-fab type="button">
<mat-icon>add</mat-icon>
</button>
</div>
<div formArrayName="options" fxLayout="column">
<div *ngFor="let answer of options.controls; let i = index" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field appearance="outline" fxFlex>
<mat-label>Option {{ i+1 }} </mat-label>
<input fxFlex matInput [formControlName]="i">
</mat-form-field>
<button mat-icon-button matTooltip="Remove this option" matTooltipPosition="right" (click)="removeOption(i)">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
<div formGroupName="meta_options" fxLayoutAlign="space-between" fxLayoutGap="20px" fxLayout="column">
<mat-form-field fxFlex="25">
<mat-select formControlName="test_type">
<mat-option *ngFor="let vtype of vtypes" value="{{ vtype.value }}">{{ vtype.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
This renders without any errors.
If I try to break down the meta_options.test_type in a component of its own in a way like:
component.ts
@Input() parent_form: FormGroup;
public vtypes: Array<Object>;
constructor(private fb: FormBuilder) {
this.vtypes = [
{
name: 'Timestamp',
value: 'timestamp'
},
{
name: 'Over',
value: 'over'
}
];
}
component.html
<mat-form-field fxFlex="25" [formGroup]="parent_form">
<mat-select formControlName="test_type">
<mat-option *ngFor="let vtype of vtypes" value="{{ vtype.value }}">{{ vtype.name }}</mat-option>
</mat-select>
</mat-form-field>
and using this component in my main parent form as
<meta-option-value [parent_form]="predictorQuestion"></meta-option-value>
I get the following error:
"Cannot find the control with the name: 'test_type'"
What am I missing here?
解决方案
You are passing the complete FormGroup (predictorQuestion) to the child. You only need to pass the predictorQuestion.get('meta_types') to the parent_form as [parent_form]="predictorQuestion.get('meta_types')".
这篇关于找不到名称的控件:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！