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

완전히 명확하지 않지만. 라디오 버튼 목록을 하나만 선택하지 않는다고 가정합니다. 그래서 여기에 문제가 있습니다. 이런 식으로하십시오.

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

이 당신을 위해 여부를 찾고 무엇을 알려줘.