There is no accessor value for the form control identified by the name ''

An issue has arisen: No value accessor for form control with name: 'sNo'

It seems that formControlName cannot be found in my DOM

On the component side:

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

On the 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

The usage of the formControlName directive is not compatible with the strong HTML tag. To properly utilize this directive, it should be implemented on form field elements such as select, input, textarea, or a custom component that adheres to the CustomValueAccessor interface.

Answer №2

It is recommended to apply formControlName="sNo" directly on an input element, rather than using it on a strong tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

List the attributes of combined interface declaration

I've come across a challenge when trying to extend the interfaces of third-party libraries globally. Whenever I import other files at the root level, the declaration file loses its global nature. Let me illustrate this with an example: Suppose I wan ...

Instructions for capturing multi-dimensional arrays using forms in Vue

I have a snippet of code that looks like this: <div class="form-item"> <label for="list-0"><?php _e('List 0', 'test'); ?></label> <input name="list[0]" type="text" id="list-0" value=""> </div> &l ...

Obtaining context from a higher order component in the constructor of a child component: tips and tricks

In order to gain access to context throughout the application, I've implemented the following context provider: import React, { Component, useContext } from 'react'; import { appInitialization, Context } from "@microsoft/teams-js"; ...

Discover the magic of observing prop changes in Vue Composition API / Vue 3!

Exploring the Vue Composition API RFC Reference site, it's easy to find various uses of the watch module, but there is a lack of examples on how to watch component props. This crucial information is not highlighted on the main page of Vue Composition ...

Updating headers with Angular HttpClient during a lazy update#Unique Version:

In my Angular application, I have been utilizing the HttpClient module from @angular/common/http for making API requests. Everything was running smoothly with POST, GET, and DELETE requests to the backend URL with the necessary Bearer Authentication header ...

Leveraging vue-devtools in combination with the composition-api while implementing a render function (such as JSX)

Ever since I made the transition to utilizing the composition-api and incorporating a render function (primarily leveraging JSX with TypeScript for type safety within the template), I've encountered an issue where vue-devtools cannot inspect the compu ...

Challenge encountered when utilizing angular 2 RC router for programmatic route navigation

Currently, I am utilizing the RC router in version rc1 with two defined routes as shown below: @Routes([ {path: '/', component: HomeComponent}, {path: '/signin', component: SigninComponent}, {path: '/dashboard', c ...

What is the best way to ensure that an animation has finished before moving on to the next route?

I attempted a solution from this source, but unfortunately, it did not work for me. What I tried to do was incorporate the code from this example into my application. However, the challenge I faced was transitioning from the /login route to the /home rout ...

Error in JavaScript: A surprise anonymous System.register call occurred

Within Visual Studio 2015, there exists a TypeScript project featuring two distinct TypeScript files: foo.ts export class Foo { bar(): string { return "hello"; } } app.ts /// <reference path="foo.ts"/> import {Foo} from './f ...

The npm module appears to be installed but is not displaying

The module has been successfully installed in my project, however, it is not being detected. How can I resolve this issue? https://i.stack.imgur.com/SjisI.jpg ...

"Troubleshooting issues with data loading using React's useEffect function

While working on my project, I encountered a strange issue where the isLoading state is being set to false before the data fetching process is completed. I am using the useEffect hook to show a loading spinner while fetching data from an API, and then disp ...

Angular 2 Observable waits to observe until the length of the returned array is greater than zero

In my current project, I am faced with the challenge of continuously skipping within a subscription until the length of the returned array is greater than 0. Here is the code snippet I am currently using: let sub = this.subscribeUserByUsername(post.usern ...

Strange behavior of the .hasOwnProperty method

When attempting to instantiate Typescript objects from JSON data received over HTTP, I began considering using the for..in loop along with .hasOwnProperty(): class User { private name: string; private age: number; constructor(data: JSON) { ...

The guard check may not be enough to prevent the object from being null

Hello, I am facing an issue with the Object is possibly "null" error message in my Node.js + Express application. How can I resolve this problem? REST API export const getOrderReport = async ( req: Request<{}, {}, IAuthUser>, res: Resp ...

Navigation on a specific page using Ionic 3

Specific Situation: I currently have a setup with four key components, all visible in the image provided. Notably, the chatbot component features a navController. Upon utilizing this.navCtrl.push(ComponentD);, Component D occupies the entire page. https: ...

Implement a Google Analytics event tracking code to track form submissions in PHP

Looking to enhance the functionality of a purchased PHP script by adding an event on successful form submissions. I have identified the function in PHP that triggers on success and have indicated where I believe the analytics code should go... function em ...

I've been stuck for hours, is there anything I should include?

I'm attempting to access http://localhost:4200/Personnes/view/:2, but I encountered the following error (ERROR TypeError: Cannot read property 'nom' of undefined) "My personnnes.service.component.ts" `export class PersonnesService { baseUr ...

JavaScript capable of storing vast quantities of data

Currently, I am receiving file chunks in byte format from my server and combining them into one variable on my frontend for downloading later. Unfortunately, I am unable to modify the server setup which sends files sliced into chunks. The issue arises whe ...

Setting default property values in a React component using Typescript

   Is there a way to define default property values in React components when using Typescript? I came across a post on SE suggesting the use of a static class variable called defaultProps with key-value pairs for properties. However, this method didn&a ...

In TypeScript, the choice between using `private readonly` within a class and

I have been contemplating the best method and potential impacts of referencing constants from outside a class within the same file. The issue arose when I was creating a basic class that would throw an error if an invalid parameter was passed: export cla ...