After referencing the discussion on
https://stackoverflow.com/questions/50197347/how-to-reset-only-specific-fields-of-form-in-angular-5Take a close look at the onReset() function. It is designed to reset all form fields except for the name and description.
formGroup: FormGroup = /* initialize the formGroup... */
onReset() {
this.formGroup.reset({
name: this.formGroup.get('email').value,
description: this.formGroup.get('description').value
});
}
Link to code snippet example
To avoid resetting certain controls in a FormGroup, you can loop through the controls and skip those on your exclude list:
const excludedControls: string[] = ['control1', 'control2'];
Object.keys(this.form.controls).forEach(controlKey => {
if (excludedControls.findIndex(excludedControl => excludedControl === controlKey) === -1) {
this.form.get(controlKey).reset();
}
});
If you want to reset your form with specific values, you can pass those values to the reset function. This will clear all other fields except for the ones specified.
const initialValues = {};
for (const field of this.form.value) {
initialValues[field] = '';
}
initialValues.firstFieldToRetain = this.form.get('firstFieldToRetain').value;
initialValues.secondFieldToRetain = this.form.get('secondFieldToRetain').value;
this.form.reset(initialValues);
By providing an object to the reset function, you can specify the Key as the formControl and the corresponding value as the desired value for the control upon resetting.
this.form.reset({
fomrControl1:value1,
formControl2:value2
});
To modify the behavior of a field, such as enabling or disabling it, pass in an Object instead of just a value. Here's an example:
this.form.reset({
fomrControl1:{value:value1, disabled:true}, // disables this field on reset
formControl2:value2
});
Instead of clearing the entire form, you can simply store the values of two inputs and then patch them back in after resetting the form.
const savedValues = [
this.form.controls.saveThis1.value,
this.form.controls.saveThis2.value,
];
this.form.reset();
this.form.controls.saveThis1.patchValue(savedValues[0]);
this.form.controls.saveThis2.patchValue(savedValues[1]);
Greetings! I would like to share a function called reset() with you. It can be used to reset all 18 fields in the form by following this syntax:
resetForm(){
this.form.controls.formField1.reset("");
this.form.controls.formField2.reset("");
.
.
this.form.controls.formField18.reset("");
}
Thank you for your attention.
After taking a quicker route, I decided to clear the entire form Then, I adjusted the value for a control that didn't require clearing. See the code snippet below
onCancelClick(form: NgForm) {
form.resetForm();
Object.keys(form.controls).forEach(name => {
if (name == "email") {
form.controls[name].patchValue(this.emailOfmember);
}
});
}
I'm in the process of adapting these Redux actions to Vuex. Upon examination, I noticed that the actions have 2 placeholders(I'm unsure of the correct term) for arguments. For illustration purposes, it looks something like this: export const ...
One of the functions I'm testing is shown below: export const createContext = async (context: any) => { const authContext = await AuthGQL(context) console.log(authContext) if(authContext.isAuth === false) throw 'UNAUTHORIZED' retu ...
When trying to launch my web app using 'ng serve', I am encountering an error that I cannot seem to resolve. The error message is quite cryptic, and despite updating dependencies and searching through similar questions, I am still unable to pinpo ...
When I deploy my pure Angular application with a REST API to a production server and try to access its URL from another site (such as a link in an email), I encounter a strange problem. Firefox doesn't provide any error message, but Chrome says: Blo ...
When utilizing angular SSR, why is it necessary to manually initiate a change detection when using afterNextRender? Considering this is an angular API. Is there a workaround for this issue? afterNextRender(() => { this.someAPI.then( ...
I'm encountering some challenges implementing a JavaScript callback with namespace in a TypeScript file. I initially believed that I could directly copy JavaScript code into TypeScript, but Visual Studio's compiler is throwing multiple errors. D ...
When using *ngFor, I am facing an issue with fetching data from my component.ts to my component.html Interestingly, the same method works for one class but not for another. Let's take a look at my service class: export class FoodListService { priv ...
When running the code sample below, it outputs "[Function: Date]", which is as expected. import 'reflect-metadata' function logType(target : any, key : string) { var t = Reflect.getMetadata("design:type", target, key); console.log(`${k ...
I am currently using ng2-charts and have successfully created a beautiful pie-chart with labels and data. However, I am unable to change the default grey color of the labels. Is this normal? How can I override the default label color? It appears that the ...
In my tsconfig file, I have the following setup: { "compilerOptions": { "module": "ESNext", "target": "es6", "sourceMap": true, "rootDir": "./&qu ...
I'm facing a challenge. Is it possible to resolve a component manually with just its name known? Let's say I have a string variable that holds the name of a component, like "UserService". I've been exploring Injector and came across method ...
How can I access the dependency injector in order to retrieve a service instance within renderModuleFactory? I am trying to do this in the main.server file to ensure the correct HTTP status code is returned for server-side rendering. Unlike NodeJs, ASP.ne ...
I have a situation where I am passing data from a child component to a parent component, and I need to automatically check if the data is empty or has a value. This code snippet is from my login.component.ts - child TypeScript file: @Output() update = ne ...
When looping through a data response from an API and displaying it in Angular, I have encountered a scenario where some fields are in date format. Is there a way to check the object and format the date to 'd-MMM-yyyy'? <table class="view- ...
let filteredRows$: Observable<any[]> = combineLatest([ this.items$, this.term$, ]).pipe( map(([items, term]) => items.filter( (item) => term === "" || item.product_name === term || ...
Here is a snippet of code I'm working with in the TypeScript playground: interface IFoo { new?(): string; } class Foo implements IFoo { new() { return 'sss'; } } I noticed that I have to include "?" in the interface met ...
Is there a way to assign to namespaces using dot notation like this? namespace item {} item.item1 = { name: "Some Item" } item.item2 = { name: "Some Item" } An error is thrown with: Property 'item1' does not exist on ty ...
Hey there, I'm currently working on making an http request from this rss feed. Here's what I have so far: makeRequest() { this.http.get('http://www.gazetaexpress.com/rss/auto-tech/?xml=1') .subscribe(data => { ...
https://github.com/bradmartin/nativescript-texttospeech This texttospeech package has TypeScript documentation available. Is there a way to convert this code for use in NS-Vue? import { TNSTextToSpeech, SpeakOptions } from 'nativescript-texttospeec ...
Currently, I am attempting to retrieve the versions of an NPM package that has been published on jFrog artifactory. I know how to achieve this using a similar method with the NPM registry through the following URL: https://registry.npmjs.org/lodash Unfor ...