编辑表单上的项目时如何动态选择输入无线电?

Question

我有一个包含 2 个不同类别(无线电输入(的表单，每个类别都有自己的输入。现在我需要添加一个"编辑"功能，我找不到如何显示正确的编辑表单，因为无线电输入总是引用最后选择的类别(我需要手动切换，然后我会看到我需要编辑的表单的内容(。如何用角度2方式解决这个问题？(我是棱角分明的新手(

表单的设置方式如下：

<form #formRef="ngForm" novalidate>
<div>
<label for="fruits">
<input type="radio" name="fruits"
[(ngModel)]="toggleFormType" #toggleFormTypeRef="ngModel" checked
>
Fruits
</label>
<label for="vegetables">
<input type="radio" name="vegetables"
[(ngModel)]="toggleFormType" #toggleFormTypeRef="ngModel" checked
>
Vegetables
</label>
</div>
<fieldset 
ngModelGroup="fruits" *ngIf="toggleFormType === 'fruits'">
// Inputs for fruits
</fieldset>
<fieldset 
ngModelGroup="vegetables" *ngIf="toggleFormType === 'vegetables'">
// Inputs for fruits
</fieldset>
</form>

稍后我ngFor展示这些项目：

<li *ngFor="let item of fruits; let i = index">
{{item.fruit.name}}
<a href="#" (click)="editItem(item, i)">
</li>
<li *ngFor="let item of vegetables; let i = index">
{{item.vegetable.name}}
<a href="#" (click)="editItem(item, i)">
</li>

当我按下editItem时，我可以看到一切正常(我可以看到预内容并将其与新内容一起保存(，我唯一缺少的是我需要切换正确的category。我需要它来显示正确的category，即编辑项目的类别。我错过了什么？

Answer 1

我解决了！我所需要的只是在toggleFormType上"设置"状态.像这样的东西

public editItem (event: Event, item: any, i: number) {
event.preventDefault();
this.editModeIsOn = true;
this.index = i;
if (item.type === "fruit") {
this.fruit = item.fruit;
this.toggleFormType = item.type;
} else {
this.vegetable = item.vegetable;
this.toggleFormType = item.type;
}
this.setView("form");
}