Angular 5: как я могу перебрать компоненты формы и установить значение

Question

У меня есть форма Angular 5 ( использует Angular Bootstrap 4 ) для компонентов группы переключателей. Существует около 25 групп переключателей, каждая из которых имеет 3 варианта: N / A, Secondary, Primary Я хотел бы разрешить N / A и Secondary для всех групп переключателей, однако только в одной группе переключателей может быть установлен флажок Primary.

Я хотел бы иметь обработчик щелчков, который перехватывает любую первичную проверку, перебирает все другие группы переключателей и устанавливает их в значение «Вторичный», если в настоящее время отмечен как «Основной», таким образом, оставляя только группу переключателей с отмеченной опцией «Основной». Как это возможно из моего обработчика кликов?

Answer 1

Вы просто должны иметь возможность добавить (change) прослушиватель событий в каждую группу, чтобы вызвать метод в вашем компоненте для итерации формы и обновления значений, где элемент управления в настоящее время имеет значение первичного.

Образец plunkr / stackblitz будет признателен, показывая, где вы находитесь, а также может быть использован в качестве основы для ответа. Минус этого, вот простое доказательство концепции

Пример StackBlitz:

• https://stackblitz.com/edit/angular-v7uuuf?embed=1&file=app/app.component.ts

Вот основные моменты:

HTML:

Добавить обработчик изменений к первичному радиовходу для обработки выбранного

<form [formGroup]="formGroup">
  <div *ngFor="let x of [1, 2, 3]">
    <input type="radio" value="na" [formControlName]="x">N/A
    <input type="radio" value="secondary" [formControlName]="x"> Secondary
    <input type="radio" value="primary" [formControlName]="x" 
        (change)="doPrimaryClick(x)"> Primary
  </div>
</form>

Код TS:

В обработчике найдите все элементы управления, которые в данный момент установлены на первичные, и сбросьте их на вторичные

doPrimaryClick(x) {
    // ignore the poor control names here
    [1, 2, 3].filter(i => i !== x)
      .forEach(i => {
        const control = this.formGroup.get(`${i}`);
        // current control is primary, so reset to secondary
        if (control.value === 'primary') {
          control.setValue('secondary');
        }
      })
  }