带有单选按钮的反应式表单数组

Question

我在使用响应式表单和一系列单选按钮时遇到问题。我的问题是我只能选择单个包而不是多个包。我应该怎么做才能选择多个包。这是我的Stackblitz 演示。 我的表单如下所示：

这是我的示例代码

HTML

<div class="card col-8 shadow-sm">
    <div class="list-group">
        <form name="form" [formGroup]="form" (ngSubmit)="form.valid && onSubmit()">
        <div class="list-group-item flex-column align-items-start" *ngFor="let list of packages ; list as index; let i of index">
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                <span class="d-flex align-items-center">
                <h5 class="card-title pr-3 d-inline-block font-weight-bold">{{list.eventName}}</h5>
                </span>
               </div>

                <p class="card-text">
                    {{list.eventNote}}
                </p>
                <div>
                    <span class="font-weight-bold pr-2">Attendings :</span>
                    <span class="ml-5">
                    <mat-radio-group formControlName="attendings"  aria-label="Select an option">
                        <mat-radio-button value="y">Yes</mat-radio-button>
                        <mat-radio-button value="n">No</mat-radio-button>
                      </mat-radio-group>
                    </span>
                </div>
                <div class="w-60 mt-4">
                    <div class="card  card-line col-md-12 mb-3" *ngFor="let fee of list.feeList">
                         <div class="card-body ctrl-height">
                         <input type="radio" formControlName="fee" id="{{fee.feeId}}" [value]="fee">
                         <label for="{{fee.feeId}}">
                          <span class="id-conf">{{fee.category}}</span>
                          <span class="price">{{fee.price}}</span>
                        </label>
                        </div> 
                      </div>
                </div>
            </div>
        </div>
    </form>
     </div>
     <div class="card-footer no-gutters ctrl-lr">
        <div class="card-body float-right"> 
            {{form.value | json}}
            <a (click)="submit()"  class="btn btn-primary  card-link d-inline pl-4 pr-4">Next </a>
        </div>
      </div>
  </div>

组件

packages = packages;

   form = new FormGroup({
    attendings: new FormControl,
    fee: new FormControl

   });
  submit() {
    console.log(this.form.value)
  }

Answer 1

您的package-list 组件中有一组包，但对于所有这些包，您只有一个FormGroup 和attendings 和fee FormControls。这就是为什么无论您选择什么，它都会覆盖仅可用的FormGroup。

你应该使用FormArray

在您的package-list.component.ts

import { FormArray, FormControl, FormGroup } from '@angular/forms';

...

export class PackagesListComponent implements OnInit {

  packages = packages;

  // generate array of FormGroup
  controls = packages.map(pack => {
    return new FormGroup({
      attendings: new FormControl(),
      fee: new FormControl()
    });
  });

  // gengerate main FormGroup containing our FormArray
  // FormArray will contain our generated FormGroups with necessary FormControls
  form = new FormGroup({
    formArray: new FormArray(this.controls)
  });

  // this getter will be used in the template to get the formArray
  get myFormArray() {
    return this.form.get('formArray') as FormArray;
  }

  ...


}

在你的package-list.component.html

<div class="card col-8 shadow-sm">
    <div class="list-group">
        <form name="form" [formGroup]="form" (ngSubmit)="form.valid && submit()">
        <div class="list-group-item flex-column align-items-start" *ngFor="let list of packages; let i = index">
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                <span class="d-flex align-items-center">
                <h5 class="card-title pr-3 d-inline-block font-weight-bold">{{list.eventName}}</h5>
                </span>
               </div>

                <p class="card-text">
                    {{list.eventNote}}
                </p>
                <div>
                    <span class="font-weight-bold pr-2">Attendings :</span>
                    <span class="ml-5">
                    <mat-radio-group [formControl]="myFormArray.at(i).get('attendings')"  aria-label="Select an option">
                        <mat-radio-button value="y">Yes</mat-radio-button>
                        <mat-radio-button value="n">No</mat-radio-button>
                      </mat-radio-group>
                    </span>
                </div>
                <div class="w-60 mt-4">
                    <div class="card  card-line col-md-12 mb-3" *ngFor="let fee of list.feeList">
                         <div class="card-body ctrl-height">
                         <input type="radio" [formControl]="myFormArray.at(i).get('fee')" id="{{fee.feeId}}" [value]="fee">
                         <label for="{{fee.feeId}}">
                          <span class="id-conf">{{fee.category}}</span>
                          <span class="price">{{fee.price}}</span>
                        </label>
                        </div> 
                      </div>
                </div>
            </div>
        </div>
    </form>
     </div>
     <div class="card-footer no-gutters ctrl-lr">
        <div class="card-body float-right"> 
            {{form.value | json}}
            <a (click)="submit()"  class="btn btn-primary  card-link d-inline pl-4 pr-4">Next </a>
        </div>
      </div>
  </div>

我在这里做了几件事：

1. 在第 4 行更新了您的 *ngFor：
   <div class="list-group-item flex-column align-items-start" *ngFor="let list of packages; let i = index">
2. 更改行号18：
   <mat-radio-group [formControl]="myFormArray.at(i).get('attendings')" aria-label="Select an option">
3. 更改行号27：
   <input type="radio" [formControl]="myFormArray.at(i).get('fee')" id="{{fee.feeId}}" [value]="fee">