Angular2自定义表单组数量

Question

我的反应式有问题。我需要一个与添加的文本输入相结合的单选按钮组。这里 current preview of my input set

遵循我模板中的当前代码：

<div class="form-group row" formArrayName="externCallerIds">
              <div class="col-sm-5">
                <label for="extern-caller-ids" class="col-form-label">{{ 'USERS.extern' | translate }}<br>
                  <a class="btn btn-secondary add-button" id="extern-caller-ids" (click)="addExtCallerId()">Hinzufügen</a>
                </label>
              </div>
              <div class="col-sm-7">
                <div *ngFor="let item of userForm.controls.externCallerIds.controls; let i = index" style="margin-bottom: 10px;">
                  <div class="input-group">
                    <span class="input-group-addon" [formGroup]="userForm">
                      <input formControlName="externCallerId" type="radio" [value]="item.value">
                    </span>
                    <div class="input-group">
                      <input formControlName="{{ i }}" type="text" class="form-control col-12">
                    </div>
                    <div class="input-group-btn" *ngIf="i > 0">
                      <button type="button" class="btn btn-danger" (click)="delExtCallerId(i)"><i class="fa fa-minus"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

主要问题是，通过添加新的输入，单选按钮组会生成一个新组，尽管每个单选输入值不同且输入名称相同。我该怎么做才能获得一组单选按钮？

我试图在 Plunkr 中实现我项目的这一部分。它不起作用，但 app.ts 中的代码与我的脚本相同。

Answer 1

虽然不是很清楚。我假设您没有为单选按钮列表获得单个 select。所以这就是事情。请这样做。

<input formControlName="externCallerId" name="radiogroup" type="radio" 
      [value]="item.value">

如果这就是您要找的，请告诉我。

Angular2自定义表单组数量

Angular2 customize the number of form groups

angular

radio-button

angular2-forms

angular-reactive-forms