Change the list of radio buttons when one is selected

Question

I create a FormArray in Angular 8 and I have a list of radio buttons in my form. I need to select one of them and set false value to all except the selected one.

I use this code but it not work :

ts:

current(group: FormGroup, id) {
    console.log(id)
    Object.keys(group.controls).forEach((key: string) => {
        const abstractControl = group.get(key);
        if (abstractControl instanceof FormGroup) {
            this.current(abstractControl, id)
        } else if (key === 'courseOptions') {
            abstractControl.value.forEach(element => {
                element.isCorrect = 'false';
                console.log(element)
                console.log(this.addQuestionFG.value)
            });
        }
    });
    this.chef.detectChanges();
}

html :

<form id="postform" [formGroup]="addQuestionFG">
    <div class="form-group kt-form__group row">
        <div class="answer col-lg-12 kt-margin-bottom-20-mobile">
            <div formArrayName="courseOptions" class="row m-auto"
                *ngFor="let project of addQuestionFG.get('courseOptions').controls; let i = index">
                <ng-container [formGroupName]="i">
                    <div class="col-lg-1 kt-margin-bottom-20-mobile icon remove text-center">
                        <label (click)="deleteItem(i)"><i class="la la-trash"></i></label>
                    </div>
                    <div class="col-lg-8 kt-margin-bottom-20-mobile">
                        <mat-form-field class="mat-form-field-fluid" appearance="outline">
                            <mat-label>{{'GENERAL.TITLE' | translate}} *</mat-label>
                            <input matInput formControlName="optionTitle" [placeholder]="'GENERAL.TITLE' | translate">
                            <mat-error *ngIf="addQuestionFG.get('title').errors?.required">
                                {{ 'GIFT.VALIDATIONS.REQUIRED.TITLE' | translate }}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col-lg-3 kt-margin-bottom-20-mobile icon">
                        <mat-radio-group aria-label="Select an option" formControlName="isCorrect">
                            <mat-radio-button value='true' (click)="current(addQuestionFG,i)">صحیح</mat-radio-button>
                        </mat-radio-group>
                    </div>
                </ng-container>
            </div>
            <div class="add-Item">
                <button (click)="AddItems()" mat-raised-button type="button"
                    color="accent">{{'COURSE_QUESTION.ADD_NEW_OPTION' |translate}}</button>
            </div>
        </div>
    </div>
</form>

What's the issue? How can I solve this problem?

score 0 · Accepted Answer · answered Sep 01 '19 at 12:16

You should use ngModel on mat-radio-group, then add [value] to our mat-radio-button

<mat-radio-group
[(ngModel)]="yourModel"
(change)="changeFunc()">
    <mat-radio-button color="primary" [value]="'option1'">
      option 1
    </mat-radio-button>
    <mat-radio-button color="primary" [value]="'option2'">
      option 2
    </mat-radio-button>
</mat-radio-group>

in your TS use the logic you need on your model, using the changeFunc()

score 0 · Answer 2 · answered Sep 01 '19 at 13:09

0

Maybe you can use (ngModelChange) instead of (change) and pass $event as parameter

<mat-radio-group
[(ngModel)]="yourModel"
(ngModelChange)="changeFunc($event)">

according to this you will reserve the obj. directly and this should be more simple to use i guess.

But corrects me if I'm wrong, I haven't programmed it now.

answered Sep 01 '19 at 13:09

J1n

71
5

1

There is no need to pass an event. Because the mode is two-way binding and already inside the component.ts – KLTR Sep 01 '19 at 20:42
totally true, sry – J1n Sep 02 '19 at 04:01

Change the list of radio buttons when one is selected

2 Answers2