選擇一個時更改單選按鈕列表

Question

我在Angular 8中創建了一個FormArray ，並且在表單中有一個單選按鈕列表。 我需要選擇其中之一，並為除選定的一項以外的所有項設置false值。

我使用此代碼，但它不起作用：

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>

怎么了 我怎么解決這個問題？

Answer 1

您應該在mat-radio-group上使用ngModel ，然后將[value]添加到我們的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>

在TS中，使用changeFunc()使用模型上所需的邏輯

Answer 2

也許您可以使用（ngModelChange）代替（change）並將$ event作為參數傳遞

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

根據此，您將保留obj。 直接，這應該更簡單易用。

但是如果我錯了，請糾正我，我現在還沒有編程。