Angular 5 is unable to access the value of a form control when the name attribute is not specified

Snippet of HTML code:

<li class="dropdownfilter" *ngIf="this.arr.inclues('Male')" (click)="getValueGender('Male',1,)" [(ngModel)]="M"><a>Male</a></li>

I encountered the following error:

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

To resolve this issue, I added a name attribute:

<li class="dropdownfilter" name="gendermale" *ngIf="this.arr.inclues('Male')" (click)="getValueGender('Male',1,)" [(ngModel)]="M"><a>Male</a></li>

Now I am facing a new exception:

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

This error is appearing in multiple sections of my code.

<div class="col-sm-8 col-xs-8 contact">
    <input  id="passphn{{bus.busServiceId}}" (keyup)="onKeyPress($event)" class="form-control contact-number" type="text" [(ngModel)]="contactNumber" name="contact-number" placeholder="Phone" required pattern="(?<!\d)\d{10}(?!\d)" minlength="10" maxlength="10" />
    <div class="shake-tooltip-web-mobile" *ngIf="webMobileError != ''">{{webMobileError}}</div> <!-- Facing the same exception here -->
</div>

<div class="panel-body" *ngIf="dropingView == 'show'"> <!-- Here too -->

Answer №1

One important point to note is that the use of this.x in HTML is not permitted.

<li class="dropdownfilter" *ngIf="arr.inclues('Male')" (click)="getValueGender('Male',1)"><a>Male</a></li>

Additionally, the li tag does not have a name attribute and does not support [(ngModel)] due to its requirement for a value property. Angular's ngModel is a built-in directive where two-way binding uses [()], Property binding uses [], and Event binding uses ().

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

A universal TypeScript type for functions that return other functions, where the ReturnType is based on the returned function's ReturnType

Greetings to all TypeScript-3-Gurus out there! I am in need of assistance in defining a generic type GuruMagic<T> that functions as follows: T represents a function that returns another function, such as this example: fetchUser(id: Id) => (disp ...

Investigating TypeScript Bugs in Visual Studio Code

As I navigate through various sources, I notice that there is a plethora of information available on older versions of VSCode (v1.16.1 - the most recent version at the time of writing) or deprecated attributes in the launch.json file. I have experimented ...

Ways to identify if there is a problem with the Firestore connection

Can anyone help me understand how I can use angularfire2 to check the accessibility of the cloud firestore database and retrieve collection values? If accessing the cloud database fails, I want to be able to retrieve local data instead. This is an exampl ...

Angular: Cloudinary error { "message": "The cloud_name provided is currently inactive" }

Having an issue with Cloudinary image upload integration in Angular. After following the documentation to include the SDK and image uploader, as well as referencing some sample projects for the component and HTML, everything seems to work fine within the p ...

Updating Angular libraries can enhance the performance and functionality of

Within our organization, we rely on several custom Angular libraries for the majority of our projects. The issue arises when we need to update our codebase to a new version of Angular, as it requires updating all libraries simply to ensure compatibility ...

Error: The lockfile and package.json file are not synchronized when running npm

Having a problem with NPM where the package-lock and package.json files are out of sync. Tried deleting node_modules, running npm install, but issue persists. Any suggestions? Error: npm ci can only install packages when package.json and package-lock.json ...

Issue NG1006: Class has two conflicting decorators applied

I encountered an issue while compiling my project: PS C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\src\app> ng serve Compiling @angular/forms : es2015 as esm2015 An unhandled exc ...

Acquire the property that broadens the interface

I'm currently working on a TypeScript function that aims to retrieve a property from an object with the condition that the returned property must extend a certain HasID interface. I envision being able to utilize it in this manner: let obj = { foo ...

multiple event listeners combined into a single function

I'm looking to streamline my button handling in JavaScript by creating just one function that can handle all the buttons on my page. Each button will trigger a different action, so I need a way to differentiate between them. I thought of using one eve ...

Is the validity of the expression !args.value || args.value.length true?

After analyzing this segment of code, I noticed an interesting expression: !args.value || args.value.length For instance, consider the following scenario: let v = {}; console.log(!v.value); //outputs true console.log(v.value); //outputs undefined con ...

Issue encountered while utilizing an observable object within a FormGroup

I've encountered an issue that I can't seem to resolve. I have a function that is responsible for creating my FormGroup along with the form fields and validators. The validators are custom validators that require a value from an observable, and t ...

Merging JSON Array of Objects from Separate Http Services in Angular 8

I am currently working on a new Angular 8 project where I need to retrieve JSON data from two different services in my component. Both sets of data are arrays of objects. My goal is to merge the objects from these arrays and then post the combined data bac ...

What is the best way to determine the appropriate generic type for this situation?

Here is an example of some code: type secondaryObjectConstraint = { [key: string]: number } abstract class Base<TObject extends object, TSecondaryObject extends secondaryObjectConstraint> {} type secondaryObjectType = { myProp: number } c ...

What is the best way to set up an empty {[key: string]: string} object in TypeScript?

interface a { d: {[key: string]: string} } class a { d = {} } The error message returned is as follows: Subsequent property declarations must have the same type. Property 'd' must be of type '{ [key: string]: string; }', but ...

Guide to utilizing the sendEmailVerification() functionality in Angular

I'm currently working on setting up an email verification system using Angular and the Google Firebase API. I came across the sendEmailVerification() function through this reference, but I'm a bit unsure about how to correctly implement it. To ad ...

Combining Layouts and Providers: A Guide to Using Both on a Single Page

I am facing an issue with my provider that is responsible for refreshing a token by making a request to the server. Additionally, I have a basic layout featuring a sidebar that I want to use only on a specific route. However, I am unsure about where to add ...

Angular and Node integration with Firestore authentication

I need some guidance with integrating an Angular application and a Node.js API, both using Firestore (Firebase). We have encountered an issue when validating tokens for authenticated users - the token never seems to expire. Even after logging out in the An ...

"What is the method for verifying if a value is not a number in Angular 2

While attempting the following: dividerColor="{{isNaN(+price) ? 'warn' : 'primary'}}" An error is being thrown: browser_adapter.ts:82 ORIGINAL EXCEPTION: TypeError: self.context.isNaN is not a function Is there a way to determine ...

Error: Failed to execute close function in inappbrowser for Ionic application

Working on integrating the "in-app-browser" plugin with my Ionic project. Check out the code snippet below: const browser = this.iab.create(mylink, '_blank'); browser.on('loadstop').subscribe( data => { if ...

Angular application parametrization

My application consists of an Angular front-end, an app layer, and a DB layer. The architecture can be seen in this image. To serve the JS front-end bits to the client and proxy requests from the client to the app layer, I am using an nginx instance. If I ...