The form control is missing a specified name attribute, causing an error with the value accessor

<input type="email" class="form-control passname" [(ngModel)]="emailID" name="Passenger Email ID" placeholder="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"/>
<div class="shake-tooltip-websearch-email" *ngIf="webEmailError != ''">{{webEmailError}}</div>
<div class="col-sm-4 col-xs-4 no-padding cont-code">
  <input class="form-control passenger-contact-number" type="text"  name="contCode" value ="+91" readonly>
</div>
<div class="col-sm-8 col-xs-8 contact">
  <input class="form-control contact-number" type="text" [(ngModel)]="contactNumber" name="contact-number" placeholder="Phone"  placeholder="Mobile Number" pattern="(?<!\d)\d{10}(?!\d)" requried minlength="10" maxlength="10" required />
  <div class="shake-tooltip-web-mobile" *ngIf="webMobileError != ''">{{webMobileError}}</div>
</div>

For the development of a contact details page, I have implemented input fields for emailID and contact number. Error tooltips are displayed when these fields are left empty. Although there is no issue with the email tooltip, I am encountering the following error message specifically for the contact number:

ERROR Error: No value accessor for form control with unspecified name attribute

Despite attempting solutions suggested on platforms like Stack Overflow, this error persists. Any advice or alternative approach to rectify this issue would be greatly appreciated.

Answer №1

The issue stems from a typo in the contact-number input field where 'required' is misspelled as 'requried'. Additionally, there are two placeholders present in that field. It's also worth noting that having multiple id's is not considered good practice.

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

Using jQuery to locate a JavaScript variable is a common practice in web development

I recently created a JSFiddle with buttons. As part of my journey to learn jQuery, I have been converting old JavaScript fiddles into jQuery implementations. However, I seem to be facing a challenge when it comes to converting the way JavaScript fetches an ...

Is there a way to retrieve data from three different Bookshelf.js models in a single query?

Three tables are in my database: User, UserDrink, and VenueDrink Here is a preview of the sample data: User id | name | gender | -------------------- 1 | John | male | 2 | Jane | female | UserDrink id | count | user_id | venue_drink_id 1 | 3 | ...

Exploiting the Power of useRef with TypeScript in Functional Components of React

I'm having trouble accessing the child component method from the parent component using useRef. Eventually, the SayHi method will be responsible for updating the hook state in the child component. Unfortunately, I am encountering some bugs that I can ...

Struggling to map a JSON file in a NextJS project using Typescript

I'm a beginner in JS and I'm currently struggling to figure out how to display the data from a json file as HTML elements. Whenever I run my code on the development server, I encounter the error message: "props.books.map is not a function&q ...

Invalid content detected in React child element - specifically, a [object Promise] was found. This issue has been identified in next js

Why am I encountering an error when I convert my page into an async function? Everything runs smoothly when it's not an async function. The only change is that it returns a pending object, which is not the desired outcome. This is how data is being f ...

What led to the decision for the two distinct chart elements to merge into a single container?

In the process of creating a dashboard using React.js and d3.js, I encountered an interesting issue that perplexed me for quite some time. Below is the Scatterplot.js code written in d3.js: import React, { Component } from "react" import * as d3 from "d3 ...

Issues with the OnChange function not properly functioning in duplicate input fields

I've designed a form that allows for adding or deleting rows, effectively cloning input fields. One of the input fields utilizes Jquery Ajax to retrieve its value. However, upon adding an extra row by cloning the parent row to generate a child row, th ...

Angular2 URL fragment not recognized in Firefox

My website's main page is divided into different sections: Introduction Services Projects All the content is on the same page. To navigate to a specific section, I use Angular2 fragments in my navigation structure. Here's the HTML snippet for ...

Tips for adjusting the property of an object that has been added to an array?

I have created an object. { "heading": [{ "sections": [] }] } var obj = jQuery.parseJSON('{"header":[{"items":[]}]}'); Then I add elements to the sections var align = jQuery.parseJSON('{"align":""}'); obj["he ...

Angular Bootstrap Modal not Displaying

<img id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='assets/barrel.jpg' alt='Text dollar code part one.' /> <div id="myModal" class="modal fade" *ngIf="isModalShowing"> <div class=" modal-lg ...

"Successful implementation of Ajax function in local environment but encountering issues when running online

I am facing an issue with my AJAX function. It works perfectly fine on my local server but does not return anything when I move it to my online server. Below is the code snippet: This is the part of the page where I call the showEspece() function: echo ...

The issue with Angular 2's router.navigate not functioning as expected within a nested JavaScript function

Consider the app module: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angul ...

Exploring the idea of nesting Angular components with dynamic data

I am attempting to create a nested structure using multiple components in the following way. My objective is to pass user data into the user-item component without directly including the item component inside the list component. Main-App <app-user-li ...

Differences in disabled option value selection between jQuery legacy and updated versions

Recently, I upgraded the jQuery version in my project from 1.7.2 to 2.1.1 and included jquery migrate for fallback support. During testing, I encountered an issue with the value of a select element in jQuery versions 2.1.1 and 1.7.2: For version 1.7.2, t ...

"Utilize Node to import either all dependencies or selectively choose specific

Should we only require the specific properties we need or the entire object? Example: Below is a snippet from my helper file 'use strict'; /** * getCallback * return a function used to make callback * @param {callback} callback - the callb ...

Utilizing asynchronous methods within setup() in @vue-composition

<script lang="ts"> import { createComponent } from "@vue/composition-api"; import { SplashPage } from "../../lib/vue-viewmodels"; export default createComponent({ async setup(props, context) { await SplashPage.init(2000, context.root.$router, ...

Make the adjustment from an H1 tag to an H2 tag with the help of

I need assistance with changing the HTML code from using an <h1> tag to a <h3> tag, using Vanilla JavaScript. Here is the code snippet in question: <h1 class="price-heading ult-responsive cust-headformat" data-ultimate-target=" ...

Before running any unit tests, I have to address all linting issues as required by ng test

Upon running ng test, the output I receive is as follows: > ng test 24 12 2019 14:20:07.854:WARN [karma]: No captured browser, open http://localhost:9876/ 24 12 2019 14:20:07.860:INFO [karma-server]: Karma v4.4.1 server started at http://0.0.0.0:9876/ ...

Encountering Errors while executing the yarn build or tsc commands

Whenever I attempt to build a project or run the yarn tsc command, I encounter various types of errors. This seems to be due to them being installed in the incorrect location. But what could be causing this issue? Feel free to ask for more details if nee ...

What is causing the component to render three times?

Below is the structure of my component: import { useEffect, useState } from "react"; function Counter() { const [count, setCount] = useState(0); console.log("comp run"); const tick = () => { setCount(count + 1); conso ...