Как связать радиокнопку Angular Material с элементом управления формой, если я не могу использовать радиогруппу?

Question

Обзор для Angular Радиокнопки материала говорит:

Радиокнопки обычно следует размещать внутри <mat-radio-group>, если структура DOM не сделает это невозможным (например, переключатели внутри ячеек таблицы).

У меня есть именно этот случай, с этим:

<div [formGroup]="form">
  <table>
    <tr>
      <td>
        <mat-radio-button name="group1" value="value1">Some text</mat-radio-button>
      </td>
      <td>
        <mat-radio-button name="group1" value="value2">Some other text</mat-radio-button>
      </td>
    </tr>
    <tr>
      <td>
        <mat-radio-button name="group2" value="value3">Text for value 3</mat-radio-button>
      </td>
      <td>
        <mat-radio-button name="group2" value="value4">Yet more text</mat-radio-button>
      </td>
    </tr>
  </table>
</div>

вместо этого:

<div [formGroup]="form">
  <mat-radio-group formControlName="group1">
    <mat-radio-button value="value1">Some text</mat-radio-button>
    <mat-radio-button value="value2">Some other text</mat-radio-button>
  </mat-radio-group>
  <mat-radio-group formControlName="group2">
    <mat-radio-button value="value3">Text for value 3</mat-radio-button>
    <mat-radio-button value="value4">Yet more text</mat-radio-button>
  </mat-radio-group>
</div>

, чтобы я мог выровнять кнопки в сетке. Это работает частично, но изменение выбора переключателя не меняет значение соответствующего элемента управления формы. Я попытался добавить formControlName="group1" или [formControl]="form.get('group1'), но это приводит к этой ошибке:

Error: No value accessor for form control with name: 'group1'`.

Как связать каждую радиокнопку с соответствующим элементом управления формой, если я не могу использовать радиогруппу?

Answer 1

От ответа pos1tron до проблемы в Angular Github-репозитории, вот способ решить sh это. Основной ответ c состоит в том, чтобы поместить каждый <mat-radio-button> в свой собственный <mat-radio-group>, но обрабатывать атрибут checked вручную, например:

<div [formGroup]="form">
  <table>
    <tr>
      <td>
        <mat-radio-group formControlName="group1">
          <mat-radio-button
            value="value1"
            [checked]="form.get('group1').value==='value1'"
          >Some text</mat-radio-button>
        </mat-radio-group>
      </td>
      <td>
        <mat-radio-group formControlName="group1">
          <mat-radio-button
            value="value2"
            [checked]="form.get('group1').value==='value2'"
          >Some other text</mat-radio-button>
        </mat-radio-group>
      </td>
    </tr>
    <tr>
      <td>
        <mat-radio-group formControlName="group2">
          <mat-radio-button
            value="value3"
            [checked]="form.get('group2').value==='value3'"
          >Text for value 3</mat-radio-button>
        </mat-radio-group>
      </td>
      <td>
        <mat-radio-group formControlName="group2">
          <mat-radio-button
            value="value4"
            [checked]="form.get('group2').value==='value4'"
          >Yet more text</mat-radio-button>
      </td>
    </tr>
  </table>
</div>