No value accessor for form control with name: ''

Question

ERROR Error: No value accessor for form control with name: 'sNo'

it is not finding formCOntrolName in my DOM

component side

this.form = new FormGroup({
 'sNo': new FormControl,
 'question': new FormControl,
 'options': new FormGroup({
   'op': new FormControl,
  })
    });

HTML side

<form [formGroup]="form">
      <div *ngFor="let data of currentQuestionsValue">
        <div *ngFor="let d of data.items ">
          <strong formControlName="sNo"> {{ d.sno }}). </strong>
          <span formControlName="question">{{ d.question}}</span>
          <div>
            <form formGroupName="options">
              <label *ngFor="let key of objectKeys(d.options)" formControlName="op">
                <input type="radio" name="option" [value]="d.options[key]">
                <span>{{ d.options[key] }}</span>
              </label>
            </form>
          </div>
        </div>
      </div>
    </form>

Answer 1

You can't apply a formControlName directive to an strong tag. It must be applied on a form field tag (select, input, textarea) or a custom component that implements the CustomValueAccessor interface.

Answer 2

You should use formControlName="sNo" on an input and not on a strong