How to use parent radio form control in form array reactive forms angular?

Question

I have a formControl (Radio) in parent formGroup and wanted to use it within formArray. Usecase is MCQ Question is having multiple options (formArray), wanted to have Radio button with each option to choose correct answer (Only One)

JS

private createForm() {
    this.form = new FormGroup({
        question: new FormControl('', Validators.required),
        correctOption: new FormControl(false),
        options: new FormArray([this.newOption(), this.newOption()])
    });
}

private newOption(): FormGroup {
    const validators = [Validators.required];
    return new FormGroup({
        value: new FormControl('', validators),
        explanation: new FormControl('')
    });
}

HTML

<div [formGroup]="form">
    <div formArrayName="options">
        <div *ngFor="let option of form.get('options')['controls']; let idx = index">
            <div class="form-group" [formGroupName]="idx">
                <div class="input-group" style="align-items: center">
                    <textarea class="form-control" id="text" placeholder="" formControlName="value" autosize
                        id="option_{{idx}}"></textarea>
                    <span class="input-group-append">
                        <button class="btn btn-primary" type="button" (click)="removeOption(idx)" tabindex="-1"><i
                                class="fas fa-trash" aria-hidden="true"></i></button>
                    </span>
                    <span class="input-group-append ml-2 fas">
                        <input id="answer_option_{{idx}}" name="correctOption" type="radio" value="{{idx}}"
                            formControlName="<How to use parent form control correctOption?>" />
                    </span>
                </div>
                <div>
                    <ckeditor [editor]="editor" formControlName="explanation"
                        [config]="{ placeholder: 'Enter explanation' }">
                    </ckeditor>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks, but I'm not sure now what you're trying to achieve. Could you elaborate on that? — Andrei Gătej
– Andrei Gătej, Commented Jul 23, 2020 at 12:18
If you see the stackblitz, I want to select the correct answer option from 2 options, so I have used Radio Button, the problem is form control of Radio Button is at root level in form, and options are formarray, so inside formarray, how can we use root level formcontrolname? if there is another way to do it let me know. — jaym
– jaym, Commented Jul 23, 2020 at 13:42

peteng · Accepted Answer · 2020-11-24 10:23:23Z

1

I think you need to understand the difference between formControlName and [formControl].

formControlName is used within your formArrayName / [formGroupName] (options/idx) to point out a specific control for each item in your options array.

[formControl] is used to point out a specific control in your [formGroup].

To use the a control from the parent, you replace formControlName="correctOption" with [formControl]="correctOption".

answered Nov 24, 2020 at 10:23

peteng

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use parent radio form control in form array reactive forms angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related