Угловой массив реактивной формы с радиокнопками - PullRequest
Новая
       25

Угловой массив реактивной формы с радиокнопками

2 голосов
/ 19 июня 2019

У меня проблемы с реактивными формами и множеством переключателей.

Моя форма выглядит так:

Example
В ряду игрок, и мне нужно выбрать статус.

компонент: 

 <tr *ngFor="let data of player">
        <th>{{data.firstname}} {{data.lastname}}</th>
        <th *ngFor="let stat of status">
        <input type="radio" id="opt1+{{data.id}}" value="{{stat}}" name="option+{{data.id}}" formArrayName="status???"></th>
      </tr>

Данные об игроке поступают из API, а статус - это массив.

ц 

this.myForm = formBuilder.group({
    status: this.formBuilder.array,
    })

Мой пример не работает. Мне нужен JSON-файл в качестве результата. (имя игрока + статус, например, присутствует) Я не могу найти способ реализовать это. Есть намеки?

1 Ответ

2 голосов
/ 20 июня 2019

Может быть, вы можете сделать это, не используя форму.

По сути, настройте html, как это, используя ngModel для установки статуса: 

<table>
  <tr>
    <th>Firstname</th>
    <th>present</th>
    <th>missing</th>
    <th>apologizes</th>
    <th>unexcused</th>
  </tr>
  <tr *ngFor="let data of player">
    <th>{{data.firstname}} {{data.lastname}}</th>
    <th *ngFor="let stat of status">
      <input type="radio" id="opt1+{{data.id}}" [(ngModel)]="data.status" value="{{stat}}" name="option+{{data.id}}">
    </th>
  </tr>
</table>

И простую функцию для получения требуемойданные: 

  getJsonResult() {
    alert(JSON.stringify(this.player.map(x => {
      return {
        playername: x.firstname + ' ' + x.lastname,
        status: x.status
      }
    })));
  }

Рабочий образец на stackblitz .

UPDATE

Для способа ReactiveForm требуется немного больше кода.Сначала есть FormGroup, а затем внутри FormArray с игроками.formArrayName="players"

<form (ngSubmit)="onSubmit()" [formGroup]="playersForm">
  <table border="1">
    <tr>
      <th>Firstname</th>
      <th>present</th>
      <th>missing</th>
      <th>apologizes</th>
      <th>unexcused</th>
    </tr>
    <tr formArrayName="players" *ngFor="let data of playersForm.get('players').controls; let i = index">
      <ng-container [formGroupName]="i">
        <th>
          <input type="text" formControlName="name" readonly>
        </th>
        <th *ngFor="let stat of status">
          <input type="radio" formControlName="status" value="{{stat}}">
        </th>
      </ng-container>
    </tr>
  </table>
  <br>
  <button type="submit">Submit</button>
</form>

Часть машинописного текста создаст и заполнит массив.

playersForm: FormGroup; constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.playersForm = this.fb.group({
      players: this.fb.array([])
    });

    this.player.forEach(p => {
      (this.playersForm.get('players') as FormArray).push(
        this.addPlayerFormGroup(p.firstname + ' ' + p.lastname, '')
      );
    });
  }

  private addPlayerFormGroup(name?: string, status?: string): FormGroup {
    return this.fb.group({
      name,
      status
    });
  }

  onSubmit() {
    alert(JSON.stringify(this.playersForm.value));
  }

В app.moudule.ts import { ReactiveFormsModule } from '@angular/forms'; вместо FormsModule.

Новая рабочая stackblitz .

ОБНОВЛЕНИЕ 2-е

Как и предполагал @Eliseo, вы можете сделать это без вложения FormArray. 

  ngOnInit(): void {
    this.playersForm = this.fb.array([]);

    this.player.forEach(p => {
      this.playersForm.push(
        this.addPlayerFormGroup(p.firstname + ' ' + p.lastname, '')
      );
    });
  }

html: 

<tr *ngFor="let fg of playersForm.controls; index as i">        
<td>
  <input type="text" [formControl]="fg.get('name')" readonly>
</td>
<td *ngFor="let stat of status">

  <input type="radio" id="opt1+{{player[i].id}}" value="{{stat}}" name="option+{{player[i].id}}" 
    [formControl]="fg.get('status')">
</td>

Stackblitz

ОБНОВЛЕНИЕ 3-е

Если у вас есть данные из наблюдаемой, рассмотрите следующий подход.Я использую SWAPI, чтобы получить некоторые данные.После того, как вы получите данные.Вы можете отобразить необработанные данные в требуемый формат, а затем вызвать метод для заполнения массива FormArray. 

  ngOnInit(): void {
    this.playersForm = this.fb.array([]);
    let counter = 0;
    const apiUrl = 'https://swapi.co/api/people';    
    this.http.get(apiUrl).subscribe((peoples: any) => {
      this.player = peoples.results.map(p => {
        return {
          id: ++counter,
          name: p.name,
          staus: null
        }
      })
      this.populateForm();
    });
  }

  private populateForm() {
    this.player.forEach(p => {
      this.playersForm.push(
        this.addPlayerFormGroup(p.name, '')
      );
    });
  }

Stackblitz

...