Here's my Angular template:
<ng-container *ngIf="form.get('typeId').value == 3">
<div formGroupName="options">
<div *ngFor="let ctrl of ctrlOptions; let i = index">
<div formGroupName="{{i}}" class="layout-row">
<input formControlName="option" type="text" placeholder="Option">
<div *ngIf="form.get('validateResponse').value" class="flex-100px flex-align-auto">
<label class="material-radio">
<input type="radio" [value]="i+1" formControlName="correctOption">
<span>Is Correct</span>
</label>
</div>
</div>
</div>
</div>
</ng-container>
In above code, I want to set formControlName to correctOption which belongs to the FormGroup of this form.
Here's the structure of my form.
public ctrlOptions: UntypedFormControl[] = [];
public optionsArray: UntypedFormArray;
this.optionsArray = new UntypedFormArray(this.ctrlOptions);
this.form = this.fb.group({
typeId: ["", Validators.compose([Validators.required])],
validateResponse: [false],
options: this.optionsArray,
correctOption: [null, Validators.compose([CustomValidators.numeric])],
});
Can someone please guide how to achieve this?
Thank you!
correctOptionmust be inthis.form.optionsnot sibling.