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自定義表單組的數量

回答

相關問題