Saturday, 9 March 2019

Radio button toggling not working in reactive form

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

enter image description here

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