The reset() function in Angular does not set form controls to empty values

When following the Hero guide, I encountered an issue while trying to reset all fields in the model using the provided code snippet.

this.form.reset({
  "firstName": "",
  "lastName": "bzz",
  "reporter": "" 
});

The problem arises when only non-empty fields, like bzz in the example, are actually being reset. I attempted to resolve this by using setValue(...), but unfortunately, this yielded the same outcome. My online search for a solution led me back to the Hero examples with no clear answer.

I also experimented with the following alternative approach, yet encountered the same issue.

this.form.get("firstName").patchValue("");

Any insights on what might be missing here would be greatly appreciated.

Answer №1

Avoid passing an object to prevent setting the form controls to null:

this.form.clear();

Answer №2

this.form.clear({
  lastName: {value: '2', disabled: false}
})

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

After closing and reopening the app, I noticed that the ionic slider images fail to display until I navigate to the next page

//// How can I retrieve the data for (let i = 0; i < res.length; i++) { let item: any = {}; item.slide = res.item(i).slide; items.push(item); } this.productsService.setSlideList = items; setTimeout(() => { this.sliderImage = items; consol ...

Save the application's state of the user in a mean stack program

In my Angular 9 application, I have forms with multiple sections. The first section includes name and personal details, the second part covers primary school information, and the third part focuses on past jobs held by the user. Each part is displayed in a ...

Transform an Hstore to a Map instance

I'm struggling to convert a string that looks like this: "'keyTest'=>'valueTest', 'keyTest2'=>'valueTest2',..." into a Map object easily. I can achieve it using forEach, but I'm wondering i ...

Building a TypeScript Rest API with efficient routing, controllers, and classes for seamless management

I have been working on transitioning a Node project to TypeScript using Express and CoreModel. In my original setup, the structure looked like this: to manage users accountRouter <- accountController <- User (Class) <- CoreModel (parent Class o ...

Creating a TypeScript client using NSwag with named properties: A step-by-step guide

Our TypeScript client is created from a swagger interface using NSwag. The resulting client code typically looks like this: client.EndPointFoo(arg1, arg2, arg3, ...) However, we encounter issues when NSwag changes the order of arguments in response to mo ...

Updating an array within a dynamic form using patchValue in Angular 4

My dynamic form, inspired by the Angular documentation, includes a feature that allows users to load their saved forms. I have encountered an issue where I am able to patch the values of text fields and radio buttons successfully, but I am facing difficu ...

Is Jhipster's Angular lazy loading feature enabled?

Although I have already come across a similar question on stack here, I am reposting it to seek further clarification for my specific issue. My objective is to dynamically load the admin module after successful login, utilizing lazy-loading in the project ...

The error occurred due to a TypeError when trying to access undefined properties (specifically 'push') while the R3Injector was processing a provider at core.mjs on line 11577

While working on a website, I came across this error message when trying to navigate: ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'push') TypeError: Cannot read properties of undefined (reading &apo ...

Go through each subscriber

I'm struggling to grasp the concept of the observer/subscriber model and how to iterate through the returned data. For example, I have a cocktail component that fetches an array of cocktail objects. The key part of cocktail.service.ts: constructor( ...

Error: The parameter should be a string, not an object

I am having trouble with a function that is supposed to return a string but instead, it returns an object. Unfortunately, I cannot use the .toString() method either. currentEnvironment: string = "beta"; serverURL: string = this.setServerURL(this.currentEnv ...

Should the checkbox be marked, set to 1?

I am looking for a way to call a method when the user checks or unchecks multiple checkboxes. Do you have any suggestions on how I can achieve this? Here is what I have tried so far: <input type="checkbox" [ngModel]="checked == 1 ? true : checked == 0 ...

Is a shallow copy created by spreading?

According to the example provided in the documentation, let first:number[] = [1, 2]; let second:number[] = [3, 4]; let both_plus:number[] = [0, ...first, ...second, 5]; console.log(`both_plus is ${both_plus}`); first[0] = 20; console.log(`first is ${firs ...

Angular 2 component encounters problem when exporting initialized interface

I'm facing a quirky issue. Within my component, I export some interfaces and when I attempt to use them without initializing, I encounter undefined errors, which is typical. Is there a more efficient way to initialize them without rewriting all that c ...

How can I ensure my function waits for a promise to be resolved using Async / Await?

I'm running into an issue where I want my function to keep executing until the nextPageToken is null. The problem occurs when the function runs for the first time, it waits for the promise to resolve. However, if there is a nextPageToken present in th ...

Transform a list of time slots into a time interval using Angular (2/4/5/6)

Hello everyone! Just wanted to share my updated solution after considering your feedback. Thank you! getTime(apptTime) { const fields = apptTime.split("-"); const startingTime = this.formatTime(+fields[0]); const endingTime = this.formatTime(+fie ...

Implementing SAML Authentication in Angular and .NET WebAPI

I am in the process of setting up a website that utilizes Angular for the user interface, .NET for the backend APIs, and integrates SAML for authentication with a third-party Azure AD. I'm finding it challenging to grasp how each component interacts w ...

Encountering an error when invoking a web API controller from a service in Angular 2

I am currently following an Angular quick start tutorial that focuses on the Hero tutorial provided on the Angular2 website. The tutorial runs smoothly for me as it binds static array data and allows for CRUD operations. However, my goal now is to understa ...

Having trouble with your Ionic 2 Android release build getting stuck on a white screen post-splash screen?

Several weeks ago, I posted a question regarding this issue but unfortunately did not receive any response. So here I am posting again with a more specific problem. The Problem: 1.) I execute: $ ionic cordova build android --release --prod 2.) Then ...

Executing an HTTP POST request without properly encoding a specific parameter

I am attempting to communicate with an unauthorized third-party API using Node and the request module. Below is the code that generates the request: request.post( { url: url, headers: MY_HEADERS_HERE, followAllR ...

What should be transmitted to the front-end following the successful validation of a token on the server?

My process starts with a login page and then moves to the profile page. When it comes to handling the token on the backend, I use the following code: app.use(verifyToken); function verifyToken(req, res, next) { if (req.path === '/auth/google&ap ...