我的Angular 8应用程序使用了很多嵌套形式,为了尽量减少代码量,我设置了一个模型类来为我的反应形式定义结构。我的html页面上有一组嵌套的组件,应该可以创建一个表单来添加或更新数据。当尝试使用基于模型结构的现有数据填充表单时,我现在收到一条错误消息,例如(错误):错误错误:找不到路径为“ info-> charName”的控件
在home.ts中,导入导出的类,并创建父窗体,如下所示:
this.CharGenMagusForm = this.fb.group({
characterid: [''],
playerUID: [''],
covenantID: [''],
info: this.fb.group(new Info()),
infoMagus: this.fb.group(new InfoMagus),
characteristics: this.fb.group(new Characteristics()),
abilities: this.fb.group(new Abilities()),
arts: this.fb.group(new Arts()),
armour: this.fb.group(new Armour()),
agingWarping: this.fb.group(new AgingWarping()),
chargen: this.fb.group(new Chargen()),
playerChar: ['']
})
在我的home.html中,添加(示例)信息组件,如下所示:
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title><h3>CHARACTER INFO</h3></mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<hr />
<form [formGroup]="CharGenMagusForm">
<app-info [parent]="CharGenMagusForm" (CloseThisPanel)="onClose($event)"></app-info>
</form>
</ng-template>
</mat-expansion-panel>
在info.ts中,我具有以下内容:
@Input() parent: FormGroup;
@Output() CloseThisPanel = new EventEmitter<any>();
infoData: Observable<Info>;
fgd: FormGroupDirective;
info: FormGroup;
constructor(private characterDetailsService: CharacterDetailsService, private fb: FormBuilder, parent: FormGroupDirective) {
this.fgd = parent;
}
ngOnInit() {
this.info = this.fgd.form;
this.info.addControl('info', this.fb.group(new Info()));
this.infoData = this.characterDetailsService.GetCharacterInfo().pipe(
tap(infoData => this.parent.patchValue({info: infoData})) <-------I suspect the problem lies here???
);
}
在info.html中,我有:
<div [formGroup] = "parent">
<form *ngIf="infoData | async" formGroupName="info">
<---and all the form control stuff--->
CharacterDetailsService使用特定的info.ts函数从Firestore获取所有数据,如下所示:
GetCharacterInfo() {
return of<Info>(this.characterInfoData);
}
该信息模型类:
export class Info {
public charName: string;
public type: string;
public covenant: string;
public gender: string;
public size: number;
public bornYear: number;
public currentYear: number;
public charAge: number;
public height: string;
public weight: string;
public hair: string;
public eyes: string;
public charPic: string;
public charPicDataUrl: string;
}
我会为我要去哪里出错提供帮助。
您的问题是与此行:
info: this.fb.group(new Info())
在运行时,它等于:
info: this.fb.group({})
因此,您基本上可以添加一个没有嵌套控件的组(charName不存在)。这是因为您的类未提供属性的默认值,您可以通过将类更改为这样来修复该问题
export class Info {
public charName: string = '';
public type: string = '';
public covenant: string = '';
...
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句