Получить значение входных переключателей и отдельных значений меток как объекта?

Question

У меня есть список меток, а затем два радиовхода для каждой метки. Я хочу передать имя метки и значение ввода и использовать их для создания объекта в моем компоненте. Метки для переключателей не связаны со вводом как стандартные метки, так как они должны иметь значения Да / Нет. Это выглядит так:

<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, чтобы получить объект, который мне нужен выше.

Answer 1

Я думаю, что решением было бы использование форм.

Если ваша логика c становится более сложной, вам следует рассмотреть возможность рассмотрения Реактивных форм .

* 1006. * Но в этом случае Шаблонно-управляемые формы могут выполнить эту работу:

<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