Angular：多个 Select 使用 FormGroup 和 FormArray

Question

我如何创建一个多 select 类型的元素，在单击时将对象推送到格式数组？

我希望最终的 JSON 对象看起来像这样：

{
    business_id: [ {
                      name: "one"

                    },]
}

这是我的 .ts 文件

 businesses = [
    {name: "one", id: 0},
    {name: "two", id: 1}
  ]

 ngOnInit(): void {
    this.leadGenerateForm = new FormGroup({
      'business_id': new FormArray([])
    })
  }

onClickBusiness(){
    const group = new FormGroup({
      'name': new FormControl(null)
    });
    (<FormArray>this.leadGenerateForm.get('business_id')).push(group);
  };

这是HTML模板

 <form formGroupName="leadGenerateForm">
        <div formArrayName="business_id">
            <select multiple (click)="onClickBusiness()">
                <div *ngFor="let businessControl of leadGenerateForm.get('business_id')['controls']; let i=index">
                    <options [formControlName]="i">{{businessControl.name}}</options>
                </div>
            </select>
        </div>
    </form>

Answer 1

我假设您需要在选择 select 控制器值后在控制器中添加多个 select options。

I have added a simple solution and its working demo here.

在HTML中：

<form [formGroup]="form" (ngSubmit)="submit()">
    <p>Select a value </p>
    <div formArrayName="items" *ngFor="let item of form.controls['items'].controls; let i = index">
        <div [formGroupName]="i">
            <select  formControlName='name' >
                    <option *ngFor="let opt of businesses; let i =index" [value]="opt.name">{{opt.name}}</option>         
            </select>
        </div>
    </div>
</form>

Component.ts :

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormArray, FormBuilder } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular 6";
  form: FormGroup;
  businesses = [{ name: "one", id: 0 }, { name: "two", id: 1 }];
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      items: this.fb.array([this.createItem()])
    });
    this.onChanges();
  }

  createItem() {
    return this.fb.group({
      name: ["Jon"]
    });
  }

  onChanges(): void {
    this.form.get("items").valueChanges.subscribe(value => {
      this.businesses.push({
        name: value[0].name,
        id: Math.floor(Math.random() * 100 + 1)
      });
    });
  }
}

Angular：多个 Select 使用 FormGroup 和 FormArray

Angular: Multiple Select Using FormGroup and FormArray

angular-material

angular

angular-forms