Refreshing the chosen input field within an Angular context

One of the components I have allows users to dynamically edit and add multiple addresses. Here's how the UI appears:

https://i.sstatic.net/3v3ND.png

Whenever I add or edit an address, the entire form field values get reset. This results in a new address form like so:

https://i.sstatic.net/UzaBh.png

However, I only want to clear the address input fields (such as Type, City, etc.) when the add button is clicked.

https://i.sstatic.net/K0oxw.png

Currently, clicking the add button resets all form field values, including the name as shown in the second image. How can I make it so that only the address fields input values are reset when clicking the add button?

DEMO

angulartypescriptangular6

Answer №1

To reset a specific field in Angular, use the following syntax:

this.yourForm.controls['field_name'].reset()

Instead of using form.reset() to reset the entire form, target only the fields you need to reset.

Answer №2

Instead of completely resetting the entire form, consider resetting only specific fields that need to be cleared.

Retrieve references to individual formControl objects for each field as shown below:

get addressType() {
    return this.editForm.get('addressType');   }

get city() {
    return this.editForm.get('city');   }

get postalCode() {
    return this.editForm.get('postalCode');   }

Then, in the onSubmit method of the form, set the values of the specific fields to empty using setValue('')

this.addressType.setValue('');
this.city.setValue('');
this.postalCode.setValue('');

For further assistance, visit this StackBlitz link

Answer №3

One alternative method to clear data is as follows:

Resetting the values of addressType, postalCode, and city in the object newAttribute to empty strings.

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

Concealed URL - Navigation with Angular 2 Routing

Is it possible to conceal the URL when using window.open()? Alternatively, can the Angular2 router be utilized to open the URL in a fresh tab? I am familiar with the method of concealing the URL during routing by using this.router.navigate(["/Pages"], { s ...

angularroutes

Exploring the power of Angular and Module Federation in SSR applications

Currently, I am utilizing angular version 13.1.0 and have successfully set up SSR by using the ng add @nguniversal/common command. In addition to that, I integrated module federation through ng add @angular-architects/<a href="/cdn-cgi/l/email-protectio ...

angularserver-side-renderingangular-universalwebpack-module-federation

Issue detected: No NgModule metadata was located for 'AppModule' in Angular version 6.1.0

app.module.ts Check out the code snippet below which defines AppModule for an Angular application: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from ...

angularangular6

Date Polyfill with Internationalization API in Angular 4/Angular-cli is not functioning as expected

I am struggling to make the polyfill of the Internationalization API work properly. The documentation (https://angular.io/docs/ts/latest/guide/pipes.html) states that all you need to do is add a script to your index.html: <script src="https://cdn.poly ...

angularangular-cliangular2-pipedate-pipe

Error encountered: Uncaught SyntaxError - An unexpected token '<' was found while matching all routes within the Next.js middleware

I am implementing a code in the middleware.ts file to redirect users to specific pages based on their role. Here is the code snippet: import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' import { get ...

javascriptreactjstypescriptnext.js

Add a new class to clr-tab

Currently, I am attempting to display Clarity tabs in a horizontal layout as opposed to the vertical layout due to the unavailability of vertical tabs. Just to clarify, the links are displayed vertically while the main structure consists of horizontal link ...

angularvmware-clarity

"Error message: TypeORM DataSource encounters a password issue with the client

Here is the content of my data-source.ts file: import {DataSource} from "typeorm"; import path from "path"; import {User} from "./entity/User"; import { config } from "dotenv"; config(); export const AppDataSource ...

typescripttypeorm

Understanding how to retrieve the value count by comparing strings in JavaScript

In my array object, I am comparing each string and incrementing the value if one letter does not match. If three characters match with the string, then I increase the count value; otherwise, it remains 0. var obj = ["race", "sack", &qu ...

javascriptjqueryarraystypescriptobject

Issue with modal-embedded React text input not functioning properly

I have designed a custom modal that displays a child element function MyModal({ children, setShow, }: { children: JSX.Element; setShow: (data: boolean) => void; }) { return ( <div className="absolute top-0 w-full h-screen fle ...

javascriptreactjstypescriptnext.js

Animated scrolling in Angular

I am working on a webpage using Angular, where each module is a component with an animation. However, I am facing an issue where the animation only runs when the page loads, but I want it to happen while the component is visible on the screen. One approa ...

cssangularanimationcss-animations

Data has not been loaded into the Angular NGX Datatable

As a beginner in Angular, I am struggling to set data from the module. ngOnInit() { this.populate(); } public populate() { this.productService.getAllProduct('6f453f89-274d-4462-9e4b-c42ae60344e4').subscribe(prod => { this. ...

angulartypescriptngx-datatable

Creating a Modern Application with MEAN stack utilizing Angular 2 and Angular-CLI

Currently, I am in the process of developing a MEAN app using Angular 2 and Angular CLI for building. Everything seems to be running smoothly as my GitHub repository can attest (link here). However, upon trying to access the page, I encounter multiple refe ...

node.jsangularmean-stack

How can we bring in a JavaScript file to an Angular 2 project?

I've been struggling with importing a JavaScript file into my Angular2 project. This particular file is not a module from npm, and the usual instructions using npm don't apply in this case. My setup involves using Angular CLI, and within my angu ...

javascriptangulartypescripttypescript-typings

Unable to apply the CSS styles on the webpage

I'm having trouble adjusting the CSS for a specific div with the class .cropper inside a component named image-cropper, and I can't figure out why it's not taking effect. Here is an image of the particular div. https://i.sstatic.net/spdJc. ...

htmlcssangular

ngOnChanges will not be triggered if a property is set directly

I utilized the modal feature from ng-bootstrap library Within my parent component, I utilized modalService to trigger the modal, and data was passed to the modal using componentInstance. In the modal component, I attempted to retrieve the sent data using ...

angulartypescript

The ng-bootstrap datepicker does not allow setting a default date prior to selection

I have implemented the ng-bootstrap date picker in my project and I am facing an issue with setting a default date for the input field before selecting a date from the datepicker itself. <input type="text" id="datepicker{{i}}" class="form-control" form ...

javascriptangulardatepickerangular-reactive-formsng-bootstrap

Using external URLs with added tracking parameters in Ionic 2

I am looking to create a unique http link to an external URL, extracted from my JSON data, within the detail pages of my app. Currently, I have the inappbrowser plugin installed that functions with a static URL directing to apple.com. However, I would lik ...

javascripttypescriptionic-frameworkionic2

Struggling to connect JSON information to a dynamically loaded sub-component

I'm currently working on dynamically loading a child component from the parent component. The goal is to pass some parameters from the parent to the child, which will then be used in the child component to make a service call and retrieve data from a ...

angularangular2-directives

Discovering the current page using ons-navigator in Onsen UI

I am currently attempting to determine the page I am on while using the popPage() function with Onsen UI's ons-navigator. I have tried the following methods, but they always return false regardless: this.navigator.nativeElement.popPage().then((page: a ...

htmlangulartypescriptnavigationonsen-ui

Confirming the HTML5 input type of numerical values

I have a requirement to display 2 different validation messages for the input type shown below <input type="number" step="1" formControlName="Ordinal" /> Within my reactive forms setup, I have a formGroup structured like this formBuilder.group({ ...

angularangular-reactive-forms