FormArray 中的 FormGroup，其中包含显示 [对象对象] 的对象

Question

我正在为编辑器开发一个原型，根据模型将数据发送到api。 这是模型：

title: string,
desc: string,
pairs: [
{
left: { label: string },
right: { label: string }
},
...
]

这里的问题是我需要处理角度形式，并且我找不到显示/使用 left.label 和 right.label 的方法。

目前，我的代码(如下所示(在打字稿中工作，因为它使用给定的值(根据模型的一些模拟数据(初始化表单。如果我在给定值后记录或打印我的表单组，它会完全按预期显示。

但我的主要问题是我的组件的 html。即使我的 formGroup 格式很好，我似乎无法使用标签属性(当然，我想编辑它们(。

我认为这是因为当我在 formArray 中创建一对时，我只将左右属性设置为组中的 formControl。

这是我component.ts：

export class LinksEditorComponent implements OnInit {
@Input() exercise;
exerciseForm: FormGroup;
get pairs(): FormArray {
return this.exerciseForm.get('pairs') as FormArray;
}
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
if (!this.exercise.title || !this.exercise.desc || !this.exercise.pairs) {
this.exercise = {
title: '',
desc: '',
pairs: []
};
}
this.initExerciseForm();
}
initExerciseForm() {
this.exerciseForm = this.formBuilder.group({
title: [this.exercise.title, Validators.required],
desc: [this.exercise.desc, Validators.required],
pairs: this.formBuilder.array(
this.exercise.pairs.map(pair => this.createPair(pair)),
Validators.required
)
});
}
createPair(pair: any): FormGroup {
return this.formBuilder.group({
left: [{ label: pair.left.label }, Validators.required],
right: [{ label: pair.right.label }, Validators.required]
});
}
onAddPair() {
this.pairs.push(
this.formBuilder.group({
left: [{ label: '' }, Validators.required],
right: [{ label: '' }, Validators.required]
})
);
}
}

这是我的component.html：

<mat-card class="links-editor" *ngIf="exercise">
<form
fxLayout="column"
fxLayoutAlign="space-between center"
[formGroup]="exerciseForm"
(ngSubmit)="onSubmit()"
fxLayout="column"
>
<mat-form-field appearance="standard">
<mat-label>Title</mat-label>
<input matInput formControlName="title" />
</mat-form-field>
<mat-form-field appearance="standard">
<mat-label>Description</mat-label>
<input matInput formControlName="desc" />
</mat-form-field>
<mat-list formArrayName="pairs">
<div *ngFor="let pairControl of pairs.controls; let i = index">
<div [formGroupName]="i">
<mat-form-field appearance="standard">
<mat-label>Left chip</mat-label>
<input matInput formControlName="left" />
</mat-form-field>
<mat-form-field appearance="standard">
<mat-label>Right chip</mat-label>
<input matInput formControlName="right" />
</mat-form-field>
</div>
</div>
<button type="button" mat-mini-fab color="accent" (click)="onAddPair()">
<mat-icon>add</mat-icon>
</button>
</mat-list>
<button type="submit" mat-fab color="accent" [disabled]="exerciseForm.invalid">
<mat-icon>done</mat-icon>
</button>
</form>
</mat-card>

如果我尝试在 HTML 文件中设置<input formControlName="left.input">，我在控制台中遇到错误，并且数据未显示。当然，如果我设置<input formControlName="left">，我得到...左边的值：[对象对象]。

Answer 1

好的，我找到了解决方案！我不明白我可以在FormGroup中创建一个FormGroup。所以这是我的代码现在的样子，以防有人需要帮助：

component.ts对创建

createPair(pair: any): FormGroup {
return this.formBuilder.group({
left: this.formBuilder.group({ label: [pair.left.label, Validators.required] }),
right: this.formBuilder.group({ label: [pair.right.label, Validators.required] })
});
}
onAddPair() {
this.pairs.push(
this.formBuilder.group({
left: this.formBuilder.group({ label: ['', Validators.required] }),
right: this.formBuilder.group({ label: ['', Validators.required] })
})
);
}

component.html显示

<mat-list formArrayName="pairs">
<div *ngFor="let pairControl of pairs.controls; let i = index">
<div [formGroupName]="i">
<mat-form-field appearance="standard" formGroupName="left">
<mat-label>Left chip</mat-label>
<input matInput formControlName="label" />
</mat-form-field>
<mat-form-field appearance="standard" formGroupName="right">
<mat-label>Right chip</mat-label>
<input matInput formControlName="label" />
</mat-form-field>
</div>
</div>
<button type="button" mat-mini-fab color="accent" (click)="onAddPair()">
<mat-icon>add</mat-icon>
</button>
</mat-list>

Answer 2

对象对象意味着您有尝试加载到圆顶中的js对象。将其放在与您的输入相同的标签内的 html 中

<p>{{left | json}}</p>

然后你应该看到左对象的所有可用属性，然后在formcontrolName中相应地设置