使用给定的Id创建"动态"单选按钮并获取选定的值

Question

要求

这是我正在使用的json。。。

[
{
"id": 8651,
"value": "Abdominal pain"
},
{
"id": 8646,
"value": "Chest pain"
},
{
"id": 8642,
"value": "Cough"
}
]

使用这个，我需要创建一个像这样的选项的用户。

Abdominal pain  □ Yes       □ No
Cough   □ Yes       □ No
Chest pain  □ Yes       □ No

一旦用户进行了选择，就需要为每个Id提取所选的值。如下所示。

[
{
"id": 8651,
"selectedValue": "Y"
},
{
"id": 8646,
"selectedValue": "N"
},
{
"id": 8642,
"selectedValue": "Y"
}
]

我的尝试创建了一个类似的表单条目

<form [formGroup]="symptomsForm">
<div>
<ul class="list-group">
<li class="list-group-item"  *ngFor="let obj of symptomsParams">
<span> {{obj.value}} </span> 
<span class="form-radio">
<input formControlName="{{obj.id}}" type="radio" /> 
<label>Yes</label>
</span>
<span class="form-radio">
<input formControlName="obj.id" type="radio" />
<label>No</label>
</span>
</li>
</ul>
</div>
</form>

它返回错误。。。core.js:15723错误错误：找不到名为"8651"的控件｛｛obj.value｝｝，显示空

组件代码

constructor() {
this.symptomsForm = this.fb.group({
symptoms: ['']
});
}

这看起来不是实现这一目标的正确方法，请提出实现这一要求的方法。

此外，要求2

[
{
"id": 8651,
"value": "Abdominal pain",
"selectedValue": "N"
},
{
"id": 8646,
"value": "Chest pain",
"selectedValue": "N"
},
{
"id": 8642,
"value": "Cough",
"selectedValue": "N"
}
]

然后列表必须选择适当的单选按钮选择

Answer 1

错误告诉您FormControl'8651'不存在。

我希望在您的ts代码中看到一个循环，为该数字添加一个控件。

所以，不是

this.symptomsForm = this.fb.group({
symptoms: ['']
});

我本以为会看到这样或类似的东西。。。

this.symptomsForm = this.fb.group({
8651: [false],
// 8651: this.fb.control(false),
});

注意，我认为数组表示法与fb.control调用相同，但请仔细检查文档。我添加它只是为了更好地解释.小组实际上在为你做什么。

Answer 2

根据您在此处粘贴的内容，我强烈建议您阅读并浏览文档中的Reactive表单

• 要在HTML中引用formControl，必须创建formControl并将其添加到formGroup
• 在您的示例中，您试图将HTML绑定到尚未创建的表单控件。这就是您看到错误的原因

例如

// the interface isn't required, but is useful for typechecking
export interface OptionI {
id number,
label: string
};
export class MyComponent {
form: FormGroup;
options: OptionI[];
constructor( private fb: FormBuilder) {
this.options = [data]; // insert your data object here. you can hard code it to start, but eventually you'll probably want to get it from somewhere else.
this.setupForm(this.options);
}
setupForm(options: OptionI[]) {
const fg = {};
data.forEach( (option: OptionI) => {
// create the properties of the form control that will be passed to the form Builder.
// treat the id as a string to ensure to avoid javascript treating the id as an index.
fg[id+''] = [ false, Validators.required];
// you the first value in the array is the default value for this control. in this case we are setting the default value to false
// the Validators are optional in case you ever had more than a radio button
};
this.form = this.fb.group(fg);
}
}

此时，您已经为所需的每一条数据动态地创建了FormControls。您现在应该能够在HTML中使用它来访问表单控件值。

<ul class="list-group">
<li class="list-group-item"  *ngFor="let obj of options">
<span> {{obj.label}} </span> 
<span class="form-radio">
<input [formControlName]="obj.id+''" type="radio" value="true" /> 
<label>Yes</label>
</span>
<span class="form-radio">
<input [formControlName]="obj.id+''" type="radio" value="false" />
<label>No</label>
</span>
</li>
</ul>

希望这些能有所帮助。反应式表单是为这些类型的场景创建动态表单的一种非常强大的方式。我鼓励你从Angular文档查看上面的链接

祝你好运。