Angular2自定义表单组的数量

我的反应表单有问题。我需要一个与添加的文本输入相结合的单选按钮组。在这里，current preview of my input set Angular2自定义表单组的数量

继我的模板当前代码：

<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中的代码与我的脚本完全相同。

来源

2017-05-04 Joeker

嗨，你能为此创建plunkr吗？因为这会让我们更明确地了解您实际需要什么。 –

嗨，我试图在Plunk这里实现我的项目的这一部分： http://plnkr.co/edit/GilKx80fW8ulBQUkGkKH?p=preview 但它不工作。但是app.ts中的代码与我的脚本完全相同。 – Joeker

虽然它不完全清楚。我假设你没有得到单选按钮列表。所以这是事情。请像这样做。

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

让我知道这是你在找什么或不是。

来源

2017-05-05 03:44:22

Hi Ronak，非常感谢。你已经解决了我的麻烦。解决方案中的单个更改/问题是输入的名称。我改变它为“externCallerId” - 之后，无线电按钮组适用于我:)） PS：我不知道该角需要一个名称属性，因为反应形式输入的“formControlName”。 – Joeker

是的，它确实需要用于分组的名称。 –

Angular2自定义表单组的数量

回答

相关问题