I am developing the toggling radio button functionality in angular 7 using reactive forms. At the moment radio button is rendering for every form array but not toggling across the arrays. The user needs an ability to set one of the addresses as primary address
UI
Code
<div formArrayName="Addresses" *ngFor="let item of frmFirm.get('Addresses').controls; let i = index;">
<div [formGroupName]="i">
<div class="form-group row">
<label class="col-md-2 col-form-label"> Primary Address
</label>
<div class="col-md-8">
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input"
id="primary1Id"
type="radio"
value="home"
formControlName="IS_HEAD_OFFICE"> Home
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label" attr.for="street1Id">Line 1
</label>
<div class="col-md-8">
<input class="form-control" id="street1Id" type="text"
formControlName="LINE1">
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label" attr.for="street2Id">Line 2
</label>
<div class="col-md-8">
<input class="form-control" id="street2Id" type="text"
formControlName="LINE2">
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label" attr.for="street3Id">Line 3
</label>
<div class="col-md-8">
<input class="form-control" id="street3Id" type="text"
formControlName="LINE3">
</div>
</div>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label" attr.for="phoneId">Phone
</label>
<div class="col-md-8">
<input class="form-control" id="phoneId" type="text"
formControlName="SWITCHBOARD_INT">
</div>
</div>
<div *ngIf="EditMode">
<button type="button" (click)="addAddress()">Add Address</button>
</div>
</div>
</div>
</div>
from Radio button toggling not working in reactive form

No comments:
Post a Comment