获取输入单选按钮的值并将标签值作为对象分开？答案

【问题标题】：Get value of input radio buttons and separate label values as an object?获取输入单选按钮的值并将标签值作为对象分开？
【发布时间】：2020-05-07 19:05:35
【问题描述】：

我有一个标签列表，然后每个标签有两个无线电输入。我想传递标签的名称和输入的值，并使用它们在我的组件中创建一个对象。单选按钮的标签与标准标签的输入无关，因为它们需要是/否值。它看起来像这样：

<ul class="field-labels">
    <li *ngFor="let label of labels">
        {{label}}
    </li>
</ul>
<div *ngFor="let label of labels; let i=index;" class="form">
    <div class="container">
        <div class="radio-wrapper">
            <input  id="{{'radio-yes-'+i}}" name="{{'radio-'+i}}"
                    type="radio" value="Yes"
                    [attr.data-field-label]="label">
            <label for="{{'radio-yes-'+i}}">Yes</label>
        </div>
        <div class="radio-wrapper">
            <input  id="{{'radio-no-'+i}}" name="{{'radio-'+i}}"
                    type="radio" value="No"
                    [attr.data-field-label]="label">
            <label for="{{'radio-no-'+i}}">No</label>
        </div>
    </div>
</div>


Frontend:
----------------------------
Correct size?  ???? Yes ⚪ No
Good value?    ???? Yes ⚪ No

然后我有一个按钮，在提交时需要获取每个标签和无线电输入的值，并将它们存储为这样的对象：

{
  "correctSize": "Yes",
  "goodValue": "Yes"
  ...
}

我正在将标签传递给自定义数据属性，但我不确定这是否需要。我希望使用无线电输入的value 和data-field-label 来获取上面我需要的对象。

【问题讨论】：

您循环的标签对象是什么样的？
目前我正在恢复：{ "Correct size?", "Good value?"...}
我的意思是您在 *ngFor="let label of labels 中使用的循环；我认为您需要在原始标签循环上使用类似 alias : 'correctSize' 的标签，然后将其推送到您的结果对象
我认为这可能是可能的，但我不确定如何从输入收音机中获取是/否值并将它们与标签值联系起来？

标签： html angular typescript object

【解决方案1】：

我认为解决方案是使用表单。

如果你的逻辑变得更复杂，你应该考虑看看 Reactive Forms。

但是，在这种情况下，模板驱动表单可以完成这项工作：

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
    <div *ngFor="let label of labels; index as idx">
    <label>{{ label }}</label>
    <ng-container [ngModelGroup]="label">
        <input ngModel [name]="'answer.' + idx" value="yes" type="radio">
        <input ngModel="yes" [name]="'answer.' + idx" value="no" type="radio">
    </ng-container>
    </div>

    <button type="submit">submit</button>
</form>

labels = ['label1', 'label2', 'label3'];

onSubmit (value) {
  console.log('value', value)
}

ng-run example

【讨论】：