Angular：1つのformControlName、リアクティブフォームの複数のフィールド

debugcn 投稿 Dev

エドゥアルド

1つだけで複数のフィールドをバインドすることは可能formControlNameですか、または同じ結果を得るために同様のことを行うことは可能ですか？私はこれを試しましたが、各選択は別のものを上書きします。

ここにstackblizの例があります：https：//stackblitz.com/edit/angular-tjgycw？file = src / app / app.component.html

Fartab

共有モデルでフォームコントロール名を使用することはできません。

しかし、あなたの場合、次のように制御モデルをマージできます。

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

<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}}</pre>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]