"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

Customize the appearance of Angular components by altering their color schemes

When working on my project, I often utilize pre-made Angular components. However, some of these components come with colors that do not align with the overall aesthetic of my project (refer to image above). To rectify this issue, I am looking to replace t ...

cssangular

Exploring an array of objects to find a specific string similar to the one being

I recently developed a TypeScript code snippet that searches for objects in a list by their name and surname, not strictly equal: list = list.filter( x => (x.surname + ' ' + x.name) .trim() .toLowerCase() .sear ...

javascripttypescript

Trouble locating feature module routes in Angular2

Trying to wrap my head around Angular2 routes. Here's the plunker link for reference: This. I'm facing an issue where it can't seem to locate the \heroes or \hero\:id route specified in the heroes-routing-module. Each time the ...

angularangular2-routing

Having trouble fetching information from a JSON file stored in a local directory while using Angular 7

I am currently experiencing an issue with my code. It works fine when fetching data from a URL, but when I try to read from a local JSON file located in the assets folder, it returns an error. searchData() { const url: any = 'https://jsonplaceholde ...

javascriptangulartypescript

Exploring the concept of individuality within front-end development

Would it be possible to manage identity directly on the front end using Angular's auth guard instead of setting up identity management on the server-side? The auth guard could handle all aspects of identity, even for smaller projects. For instance, in ...

angularasp.net-coresecurityasp.net-identitybackend

Tailored production method based on specific criteria

One of my challenges is to create a versatile factory method using typescript. The main objective is to initialize a class based on its name using generics, instead of employing if/else or switch statements. I am aiming for similar functionality as this ...

typescript

Ways to transfer selected options from a dropdown menu to a higher-level component

I am currently in the process of configuring a modal component that showcases various data from a specific record to the user. The user is provided with a Bulma dropdown component for each field, enabling them to make changes as needed. To streamline the c ...

typescriptvue.jsbulma

Utilizing BehaviourSubject for cross-component communication in Angular

My table is populated with data from a nodeJS API connected to methods inside my service. I attempted using a Behavior Subject in my service, initialized as undefined due to the backend data retrieval: Service: import { Injectable } from "@angular/core" ...

javascriptangularcomponentsbehaviorsubject

Leveraging the power of LocalStorage in Ionic 2

Trying to collect data from two text fields and store it using LocalStorage has proven tricky. Below is the code I have set up, but unfortunately it's not functioning as expected. Can you provide guidance on how to resolve this issue? In page1.html ...

javascriptionic-frameworkangularionic2

What is the process for transferring data from child components to parent components in Angular 2?

I have been thinking about the scenario where a descendant of a descendant of a parent needs to pass information back up to the parent. Would the descendant passing the information need to go through the chain back up? Descendant2 Component -> Descenda ...

angular

The Vue application combined with TypeScript is displaying an empty white screen

I've enrolled in a Vue + Firestore course, but I'm attempting to use TypeScript instead of conventional JavaScript. The basic setup is complete, however, my app displays a blank page when it should be showing a simple header text from the App.vue ...

typescriptvue.js

Failure to trigger the callback for mongoose.connection.once('open') event

Currently, I am in the process of setting up a custom Node server using Next.js. Although I'm utilizing Next.js this time around, it should not affect the outcome. In my previous applications, I always relied on mongoose.connection.once('open&ap ...

javascriptnode.jstypescriptmongoosenext.js

Oops! It seems like there has been an issue. The EnjoyHint is not

Encountered the following error message: https://i.stack.imgur.com/JL4l6.png The error in my code is within the line that initializes a new EnjoyHint object. Seeking assistance to resolve this issue. public initiate(stepName) { const steps = ...

angulartypescriptenjoyhint

Leveraging Runtime Environment Variables in Angular 5 within the app.module.ts File

I am currently utilizing a third-party authentication module called OktaAuthModule. In order to import it into my root module (app.module.ts), I must first configure it as follows: const config = { url: https://myurl.com/ } @NgModule({ declaration ...

angularokta

Is it possible to deduce Typescript argument types for a specific implementation that has multiple overloaded signatures?

My call method has two signatures and a single implementation: call<T extends CallChannel, TArgs extends CallParameters[T]>(channel: T, ...args: TArgs): ReturnType<CallListener<T>>; call<T extends SharedChannel, TArgs extends SharedPar ...

typescriptoverloading

Row Model for Server-Side Processing

Looking to maintain the default loading overlay while serverSideRowModel functions are invoked in my Angular app, and prevent the loading spinner from showing up during data fetching. ...

angularoverlayag-gridserver-sideenterprise

Leverage the power of JavaScript functions within the app.component.ts file of

I have a JavaScript file named action.js and I am trying to incorporate it into an Angular project. After doing some research, I found out that the js file should be placed in the assets folder and the path must be referenced in the scripts array within an ...

javascripthtmlnode.jsangulartypescript

Difficulty with setting up Typescript in Visual Studio Code on MacOS Catalina

I'm currently facing an issue that appears to be related to the environment. How can I resolve it? And how do I link the installed TSC to my console? Steps to Recreate: npm install -g typescript was able to successfully install or update [email ...

node.jstypescriptnpmvisual-studio-codemacos-catalina

Struggling to extract the hours and minutes from a date in IONIC: encountering an error stating that getHours is not a recognized

I encountered an issue while trying to extract the hours and minutes from a date in Ionic. Below is the code snippet from my .html file : <ion-datetime displayFormat="HH:mm" [(ngModel)]='timeEntered1' picker-format="h:mm"></ion-date ...

angulartypescriptionic4

Unable to retrieve the third attribute of a Class using Angular2's toString method

Here is the code snippet I am working with: import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Hello {{name}}</h1> <p><strong>Email:</strong> {{email}}< ...

javascriptangulartypescript