Angular: несколько полей в одном formControlName, реактивная форма

Question

Можно ли связать более одного поля в одном formControlName или сделать что-то подобное, чтобы получить тот же результат? Я пробовал это, но каждый выбор перезаписывает другой.

Вот пример стекаблиза: https://stackblitz.com/edit/angular-tjgycw?file=src/app/app.component.html

Answer 1

Невозможно иметь имена элементов управления формы с общей моделью.

Но в вашем случае вы можете объединить модели управления следующим образом:

TS

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  acessoForm: FormGroup;
  listaPermissoes: any[];

  constructor(
    private builder: FormBuilder,
  ) {

  }

  ngOnInit() {

    this.listaPermissoes = [
      {
        "id": 2,
        "nome": "grupo.perm.cadeira",
        "permissoes": [
          {
            "id": 6,
            "nome": "perm.cadastrarCadeira"
          },
          {
            "id": 7,
            "nome": "perm.alterarCadeira"
          },
        ]
      },
      {
        "id": 4,
        "nome": "grupo.perm.mesa",
        "permissoes": [
          {
            "id": 15,
            "nome": "perm.cadastrarMesa"
          },
          {
            "id": 16,
            "nome": "perm.alterarMesa"
          },
        ]
      }]

    this.acessoForm = this.builder.group(
      this.listaPermissoes.map((item, index) => `permissoes-${index}`)
        .reduce((pre, curr) => { 
          pre[curr] = [[]]; 
          return pre; }, {}), {});
  }

  selectedPermissoes(){
    return [].concat(...Object.values(this.acessoForm.value));
  }


}

HTML

<code><form [formGroup]="acessoForm">
    <div *ngFor="let listaPermissao of listaPermissoes; let i = index">
        <div class="col-md-6">
            <p>{{listaPermissao.nome}}</p>
        </div>

        <div class="col-md-6">

            <select class="form-control" [formControlName]="'permissoes-'+i" multiple>
                                      <option *ngFor="let permissao of listaPermissao.permissoes" [ngValue]="permissao">{{permissao.nome}}</option>
                                    </select>
        </div>
    </div>
</form>
<pre>{{selectedPermissoes() | json}}