Guide on clearing a form after it has been submitted with Controller As syntax

Once a user submits an object through a form, I want the form to reset so they can add another entry. I've attempted to use $setPristine() but am struggling with the syntax. Currently, I have resorted to redirecting back to the same page, which doesn't achieve the desired reset. I'm also unsure if using $setPristine is the correct approach. Below is my save function:

    export class AddCarController {
    public newCar;
    public save() {
        this.carService.save(this.newCar).then(() => { this.$location.path('/addCarPage') });
    }
    constructor(
        private carService: MyApp.Services.CarService,
        private $location: angular.ILocationService
    ) { }

}

Answer №1

With Angular, you have the flexibility to create your model directly in HTML, in the controller, or even in both places simultaneously.

If you choose to define your model within the HTML structure:

$scope.newCar = {} //This will reset the UI model object

If you opt to create your model in the JavaScript Controller:

$scope.newCar = new carModel() //This will initialize a new car object with default values, if the model is defined in the controller

Avoid switching back and forth between defining models - it's not recommended

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

Ways to manage multiple Observables

Two Observables are being returned from different services, each providing only one value (similar to Observable.just()). In TypeScript, types play a crucial role in this context. Is there a method to determine when both Observables have been resolved (in ...

Count up with style using the "jQuery Boilerplate" plugin for Jquery!

I am a beginner in creating jQuery plugins. The following jQuery plugin has been created using jQuery Boilerplate. It performs a count-up and notifies when the count-up is completed. I would like to have a function that restarts the count-up by setting t ...

Am I properly preloading images with this method?

Is the following method appropriate for preloading images? I have a table that changes its background when a 'select option' is changed. On my page's body, I include: <body onload="preload();"> Within the Form on the same page, I ha ...

click event on ion card

Attempting to handle a click event within an ion-card using Ionic 5.0.2 version has presented some challenges. Despite my efforts, I have not been successful in handling the event with the expected function. Here is a snippet of my code: Dynamic card list ...

Resetting an object back to its initial value while preserving its bindings in AngularJS

My service deals with a complex object retrieved from an API, like this: { name: "Foo", addr: { street: "123 Acacia Ave", zip: "10010" } } The initial value is stored in myService.address, and another variable holds a copy of ...

Using JavaScript to manage form input values in React

I am currently coding a basic application using NextJS and bulma CSS. The snippet below shows the form I am working on: const MyPage = () =>{ const [firstName, setFirstName] = useState('') const [secondName, setSecondName] = useState('&ap ...

Building a Custom Role Provider for Windows Authentication

We are currently facing an issue with our custom role provider on an ASP.NET web forms intranet site. Despite ensuring that the class inherits from RoleProvider and implements all necessary methods, it appears that the methods are not being called, includi ...

Is there a method in JavaScript/jQuery to gently push or flick the scroll so that it can be easily interrupted by the user? Further details are provided below

I am looking for a solution in javascript that will allow the page to automatically scroll down slightly, but I also want the user to be able to interrupt this scroll. When using jquery for auto-scrolling, if the user begins manual scrolling while the ani ...

problem with hiding bootstrap dropdown

Having trouble with Bootstrap, the dropdown menu is not hiding when I hover over the link. I want the dropdown to only show when I hover over it. Any help would be appreciated. Here is the code snippet: <nav> ...

Create a notification that appears no matter where I am browsing

Is it possible to create a notification system in ReactJS/JS where messages are displayed at the bottom of the screen, even if the page is not active or minimized? I have set up a timer and would like to be able to move to another browser tab while the t ...

Looking to transfer zip files from a React user interface to a Node.js server backend, where I can then save the folder to a specific directory on my system

Frontend I am currently working on a feature that involves uploading a zipped folder containing CSV files from the React UI input field. import React, { useState } from "react"; import axios from "axios"; function App() { const [uplo ...

What could be causing the User object in the auth0/nextjs useUser hook to have missing properties?

The user object retrieved using the useUser hook from auth0/nextjs package seems to be missing some important properties: { "nickname": "example", "name": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedbc6dfd3ced2dbfec7 ...

Change the file extension from .babelrc to .babelrc.js

I am using Material UI and aiming to decrease the bundle size by loading components on demand. In my project, I have a Babel configuration in a .babelrc file. The current .babelrc setup is as follows: { "presets": ["@babel/preset-env", "@babel/react ...

Implementing a click event for multiple controls by utilizing class names in Angular

I have been able to successfully attach a click event in Angular using the following method: <span (click)="showInfo()" class="info-span"></span> However, I have 20 spans with similar attributes. Is there a more centralized ...

Issue with TypeScript retrieving value from an array

Within my component.ts class, I have defined an interface called Country: export interface Country{ id: String; name: String; checked: false; } const country: Country[] = [ { id: 'India', name: 'India', checked: false}, { ...

Access the raw data value of the parent node using the "val()" method from a child reference within Cloud Functions for Realtime Database

Suppose I'm indicating a path in my TypeScript/JavaScript code function like this: exports.sendNotification = functions.database.ref('shops/countries/{countryName}/shopAddress/{currentShopAddress}') .onWrite((snapshot,context) => { ...

It is not possible to remove two cookies simultaneously

Yesterday, I found myself in a cookie conundrum with two cookies called access_token and refresh_token. I was struggling to figure out how to delete both of these cookies at once: const logout = (req, res) => { res.clearCookie('access_token&a ...

Issue with AngularJS model not synchronizing when changing user during login process

Seeking guidance on a specific functionality requirement: I want the browser to automatically fill in the username and password fields when a user accesses the login form. Currently, my implementation works correctly on Firefox and Chrome, but there is a b ...

Unusual vibrations experienced when using Orbit Controls to rotate the camera in Three.js

I am currently working on a project to create a model of the Solar System. Here is the metric I am using: scale = 0.001; // 1 unit - 1 kilometer var AU = 149597871 * scale; To set up the camera, renderer, and controls, I have defined them as follows: ca ...

The color in the Gridview column does not fully cover the entire space within

I'm struggling with getting rid of a 1px border around certain highlighted boxes in my gridview. The issue persists on both IE7 and FF. Rendered html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ ...