"Error: The method setValue is not found in the AbstractControl type" when trying to clear form in Angular 2

Here is the template code:

  <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate="novalidate">
        <textarea [ngClass]="{ 'error': comment }"  
                  [formControl]="form.controls['comment']"  
                  placeholder="Comment...."></textarea>
    <div class="form-group">
       <button type="submit" id="template-contactform-submit" 
               name="template-contactform-submit"  
               value="submit">Enter</button>
    </div>

This is the TypeScript code:

for(var prop in form) {
   if(this.form.controls.hasOwnProperty(prop)) {
      this.form.controls[prop].setValue(" ");
   }
}

An error " setValue does not exists on type AbstractControl" is being displayed.

angulartypescript

Answer №1

Experiment with

(<FormGroup>this.form.controls[prop]).setValue(" ");

you should also remember to include FormGroup for it to function correctly, like so:

import {FormGroup} from '@angular/forms';

Answer №2

It is important to carefully review the error message you are encountering.

Firstly, let's do a quick check - the error message displayed in the question reads:

setValue does not exists on type AbstractControl

while if we look at what the TypeScript compiler would say:

Property 'setValue' does not exist on type 'AbstractControl'

This inconsistency prompts us to confirm whether the incorrect method call is actually setValue, and not something else.

Secondly - the setValue DOES EXIST on AbstractControl. You can refer to the source code of AbstractControl

export abstract class AbstractControl {
    ...
    /**
     * Sets the value of the control. Abstract method (implemented in sub-classes).
     */
    abstract setValue(value: any, options?: Object): void;

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

Working with JSON data in AngularJS2's templates

Is there a way for me to process JSON from the template in a manner similar to the second code I provided? First code. This method works well when using .json and .map () @Component({ ..// template: `..// <li *ngFor="#user of users"> ...

jsontypescriptangular

The error message is stating that the module located at C://.. does not have an exported member named "firebaseObservable"

Trying to follow an Angular/Firebase tutorial for a class but encountering issues. The FirebaseListObservable is not being imported in my component even though I have followed the tutorial closely. I've looked at similar questions for solutions but ha ...

javascriptnode.jsangularfirebase

The JSON object, which has been converted into a string and sent over the network,

Attempting to set up a websocket server using TypeScript in Node.js, the following code was used: ws.on('message', (msg: string) => { console.log("got message:" + msg); const m = JSON.parse(msg); console.log(m); ...

javascriptjsontypescriptwebsocket

Exporting symbols within the same namespace from multiple files in a TypeScript project

I have a typescript module and I am looking to define symbols within the 'aaa' namespace from multiple files. Here is an example of what my code looks like: a.ts: export namespace aaa { export const a = "a"; } b.ts: export namespac ...

typescriptnpmmodulenamespacesexport

Utilizing the 'create' function in sqlite each time I need to run a query

I've been diving into SQLite within the Ionic framework and have pieced together some code based on examples I've encountered. import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-a ...

sqlitetypescriptionic-frameworkionic3

How to Lazy Load a Standalone Component with Parameters in Angular 17?

This is my HTML code snippet: <a class="dropdown-item" [routerLink]="['/videos', p.param]">{{ p.title }}</a> Below is the code in app.route.ts file: { path: 'videos/:folder', loadComponent: () =& ...

angularangular-routerlinkangular-standalone-components

Angular confirmation page following successful HTTP POST request to Web API

First question here... I have been given the task of improving an Angular application, even though I am starting with zero experience in Angular. While I do have some background in JavaScript, I mostly work with Java (JSP's and yes, JavaScript). Despi ...

javascriptangular

The Nuxt Vuex authentication store seems to be having trouble updating my getters

Despite the store containing the data, my getters are not updating reactively. Take a look at my code below: function initialAuthState (): AuthState { return { token: undefined, currentUser: undefined, refreshToken: undefined } } export c ...

typescriptvue.jsnuxt.jsvuexstore

Simulating chained responses in Express using JEST

I am relatively new to using jest and typescript, currently working on creating a unit test for a controller function in jest import { Request, Response } from 'express'; const healthCheck = (_req: Request, _res: Response) => { const value ...

node.jstypescriptexpressjestjs

Tips for setting up ngnix as a proxy server for Angular and NodeJS applications

Currently, I am working on configuring ngnix to run alongside both NodeJS and Angular. As of now, I can successfully access (Server API) and (Angular). However, when attempting to log in with socket.io, I consistently encounter a 'Socket connection ...

node.jsangularsocketsnginxproxy

Angular2: Unusual behavior when using angular-http Headers

Currently, I am working on a simple Angular 2 web application and encountering some challenges with HTTP headers... This is the function causing the issue: postStockTake(stockTakeModel: StockTakeModel) : Observable<Response> { let body = JSON.strin ...

angularhttp-headers

Unable to locate any static exports within the TypeScript library bundle

In my file Style.ts, I have a class called Style: export class Style { ... } The Style class consists of properties, methods, and a constructor, along with import statements for other class dependencies. It is being used by other classes through the ...

typescriptwebpack

I'm having trouble with the calculator, unable to identify the issue (Typescript)

I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...

javascripthtmltypescriptcalculator

Pass a React component as a required prop in Typescript when certain props are necessary

I am currently working on a project where I need to create a custom TreeView component using React and Typescript. My goal is to have the ability to inject a template for each TreeNode in order to render them dynamically. My main challenge right now is fi ...

reactjstypescript

Creating divs dynamically in a loop and displaying them upon clicking a button in Angular

I am trying to dynamically create divs in a loop and show the selected div when I press a specific button. In theory, this is how I envision it... <div>div1</div><button (click)="showDiv(divID)">showDIV</button> To hide a ...

arraysangularangular-ng-if

Ways to arrange the JSON array by keys in reverse order utilizing Angular

let data = { '2021-07-20-21:10': { sends: 1, recvs: 1, notSents: 0, rejects: 0, xptSkips: 0, timeouts: 0, appErrors: 0, responseTimeAvg: 172, responseTimeMax: 172, ...

arraysjsonangular

Cross-origin resource sharing (CORS): In PHP, the response to the preflight request is not successfully passing. I am permitting

With the abundance of CORS posts already out there, I find myself adding to them in search of a solution. My dilemma involves building an angular 4 application that interacts with my php api. Locally, everything works seamlessly. However, once I upload the ...

phpangularcorspreflight

Implementing Angular *ngFor to Reference an Object Using Its Key

myjson is a collection of various hijabs and headscarves: [ { "support": 2, "items": [ [ { "title": "Segitiga Wolfis", "price": 23000, "descripti ...

node.jsjsonangular

The function '() => Promise<T>' cannot be assigned to type 'Promise<T>'

Here is an interface I have: export interface ITreeViewItem { getChildren: Promise<ITreeViewItem[]>; ... Now, let's take a look at the implementation of it: export class MyClass implements ITreeViewItem { public async getChildren() ...

typescriptasync-await

Having trouble iterating over an array in Angular's TypeScript

I've been attempting to loop through an array of objects in TypeScript, but encountered the following error: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'forEach' of undefined TypeError: Cannot read property 'fo ...

angulartypescript