0

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!

2
  • I think correctOption must be in this.form.options not sibling. Commented Nov 15, 2022 at 6:56
  • re-write your code. You're using formControlName when is formArrayName, you're iterating over ctrlOptions instead over optionsArray.controls, use formGroupName={{i}} when is [formGroupName]="i",... puff there many, many errors. Think also about if you need a FormArray of FormGroup or a FormArray of FormControl. Commented Nov 15, 2022 at 7:54

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.