The field 'updateEmployeeName' is not found in the 'ContactFormComponent' class

Just starting out with Angular and experimenting with Angular forms. Even though I followed a tutorial and copied the code below, I keep encountering the following error:

Property 'updateEmployeeName' does not exist on type 'ContactFormComponent'

Here is the TypeScript code:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})

export class ContactFormComponent {
  employeeName = new FormControl('');

  updateEmployeeName() {
    this.employeeName.setValue('John');
  }

}

And here is the corresponding HTML code:

<label>
  Employee Name:
  <input type="text" [formControl]="employeeName">
</label>

Answer №2

It appears that there may be a discrepancy in the code you provided.
The error message indicates that updateEmployeeName() is being referenced somewhere within your code, yet only its declaration is visible in your ts file.
Furthermore, updateEmployeeName() is not utilized within the HTML or the other TS files shared along with your query.
Could you kindly verify if updateEmployeeName has been employed elsewhere?

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

Error message indicating an issue with defaultProps on a React FunctionComponent in Typescript

Looking at this React Functional Component: import React, { memo } from 'react'; interface Options { buttonType?: JSX.IntrinsicElements['button']['type']; text: string; }; const defaultSettings = { buttonType: 'b ...

Angular's strict mode causing issues with CustomValidator for email field in form

Trying to correctly define an email form field: this.form.addControl('email', new FormControl('', [ Validators.required, CustomFormValidators.isValidEmail ])); Utilizing a CustomFormValidators class that includes an isValidEmail me ...

Lately, I've run into some challenges while trying to set up a category filter for an online store being developed with NodeJs and Angular

When examining the code snippets below, it appears that the filter functions are not functioning as expected. Component HTML: <div class="products-page"> <div class="grid"> <div class="col-3"> <h4 ...

Introduction to React with Typescript: Greeting the World

I am attempting to create a Hello World React application with Typescript. Below is the code I have written. Method 1 works without any issues, but method 2 throws an error. Method 1 - TypeScriptComponent.tsx import React from 'react' import Re ...

What is the purpose of packageConfigPaths in a SystemJS setup?

When working with SystemJS, you will often come across the 'packageConfigPaths' property in the config Object. Surprisingly, this property is not mentioned at all in the SystemJS Configuration API documentation. Can anyone clarify what exactly it ...

Issue with Angular 6: Dynamic Meta tag malfunctioning while sharing page on Facebook with og:description tag

I am facing an issue where I want to update the meta tags dynamically using API calls. The updated data shows correctly when inspected, but when sharing the link on Facebook, it does not reflect the changes. Index.html <meta name="description" conte ...

Redeclaring block-scoped variable is not allowed

I have a Node program that primarily uses CommonJS, causing my JS files to begin with several require statements. To transition into TypeScript gradually, I decided to rename these JS files to TS. However, I encountered the following errors: https://i.sst ...

What could be causing the Google OAuth callback to fail upon the initial login attempt on my site?

I have developed a website that allows users to log in with Google. The following code is used to verify if the user has logged in before. If they have, they are simply logged into the site. However, if it's their first time logging in, they are added ...

How can one specify a data type for JSON data in PostgreSQL?

I currently have a TypeScript interface that includes one property as a float and the other as a string. Although I am able to insert JSON data directly into a table, I am curious if there is a way to specify data types within the JSON data itself. inter ...

Key factors to keep in mind when comparing JavaScript dates: months

Check the dates and determine if the enddate refers to the following month by returning a boolean value. Example startdate = January 15, 2020 enddate = February 02, 2020 Output : enddate is a future month startdate = January 15, 2020 enddate = January 2 ...

What is the best way to divide a string by identifying a specific character that comes after another character?

I have a string in the format: "MyGroup/exercise#324242-BC2_asd213" How can I extract the portion of the string before -? Specifically, I want to retrieve MyGroup/exercise#324242. It is important to note that the split should occur after the fir ...

Even with a custom usernameField, Passport.js still generates a 'missing credentials' error when using the local authentication strategy

Currently, I am working on incorporating passport.js's local strategy for authentication. I suspect that the use of express routes in my server might be causing an issue. Whenever I attempt to send data from the frontend using Axios, the server throw ...

The server will only load on Safari's localhost and not on Chrome's

My Node server is only working in Safari when using http://localhost:8000, but not in Chrome. Interestingly, using 127.0.0.1:8000 works on both browsers. I'm puzzled as to why localhost doesn't work in Chrome even though pinging localhost in my t ...

The new updates in angular 2 rc.6 have rendered jspm bundling ineffective

Angular 2 has introduced some changes in rc.6 that have caused issues with bundling. You can find more details about the changes in rc.6 here. This update included a major overhaul, with references to how SystemJS is now utilized in the change log. As a r ...

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

Even as I create fresh references, my JavaScript array object continues to overwrite previous objects

Coming from a background in c# and c++, I am facing some confusion with a particular situation. Within the scope of my function, I am creating a new object before pushing it into an 'array'. Strangely, when I create the new object, it appears to ...

Is it possible for the Vanilla JS WebSocket object to accurately assign a protocol value while the "ws" package necessary for Node.js is unable to do so?

I am currently working on creating a WebSocket object in node (version 18.17.0), but I have been facing an issue where setting the protocol using the "ws" library always results in it being an empty string. Surprisingly, the Vanilla JS WebSocket object ca ...

What is the process for including an object in an http.post request?

My contact object needs to be included in the http.post method. I'm struggling with where exactly to pass this contact parameter. Can you provide guidance on how to modify my code accordingly and also share any relevant links related to the http.post ...

The React-widgets DateTimePicker is malfunctioning and displaying an error stating that it cannot assign to the type of 'Readonly<DateTimePickerProps>'

Hello there! I am a newcomer to TypeScript and I am facing difficulty in understanding an error. Any help regarding this will be greatly appreciated. I have tried searching for solutions online and even attempted changing the version, but I am unsure of wh ...

Local variables are now being refreshed with every modification in the data stored in Cloud Firestore

Having trouble maintaining the accuracy of my local variables in sync with changes to the data in cloud firestore. Specifically, in my local variable called count_vehicle, the value represents a count based on specific conditions from the data in cloud fir ...