Is there a way to set formArray values back to their default values without using form.reset(), which sets them to null?

I am a beginner when it comes to using Angular and I am currently dealing with a form that consists of the following fields.

 this.catform = new FormGroup({
  name: new FormControl('', Validators.required,),
  source: new FormControl('', Validators.required),
  event: new FormControl('', Validators.required),
  cond:  this.fb.array([this.Cond()], Validators.required)     
});

 Cond() : FormGroup {
return this.fb.group({
  disp : new FormControl(1),
  field: new FormControl('', Validators.required),
  ct: new FormControl('', Validators.required),
  value: new FormControl('', Validators.required),
  ot : 'AND'
});
}

Whenever I submit the form and use this.catform.reset(), the "disp" and "ot" fields reset to null, causing the entire form to have null values. This leads to unsuccessful form submission because the backend does not accept null values for these fields. Since these two fields are not present in the HTML template, I am unable to edit them from there. I am looking for suggestions on how to maintain these values as specified above even after form reset.

javascriptangulartypescriptangular-reactive-forms

Answer №1

Change the given code into a method for easier use. To reset, simply call the method and assign it to this.catform

new FormGroup({
    name: new FormControl('', Validators.required,),
    source: new FormControl('', Validators.required),
    event: new FormControl('', Validators.required),
    cond:  this.fb.array([this.Cond()], Validators.required)
});

Example implementation:

this.catform=this.createFormgroup();

private createFormgroup() {
    return new FormGroup({
    name: new FormControl('', Validators.required,),
    source: new FormControl('', Validators.required),
    event: new FormControl('', Validators.required),
    cond:  this.fb.array([this.Cond()], Validators.required)
    });
}

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

Caution: React detecting an active event listener on a scrolling-dependent 'touchstart' action

I am facing an issue with a React component that contains a Material-UI Slider. Whenever this component renders, I receive the following warning message: "Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking ...

javascriptreactjsmaterial-ui

Ways to display the data within a BLOB object

On this page, the user is showcasing a table with three columns - tipo_esame (string), data_esame (string), and uri (BLOB). const archiveItems = this.state.archive.map((archive, i) => { return ( <tr key={archive.hash_referral}> <td ...

javascriptreactjs

Utilize React Native to continuously fetch and display data from this API

[React-Native] Seeking assistance on looping through JSON API for conditional rendering. As a beginner, I would greatly appreciate your guidance. Thank you. Find my code here: https://drive.google.com/file/d/0B3x6OW2-ZXs6SGgxWmtFTFRHV00/view Check out th ...

javascriptarraysjsonreact-native

Does Nativescript successfully utilize AOT Compilation even with the `Compiler` package still included?

I'm running this command: npm run ns-bundle --android --build-app --uglify The command is successful (you can find the complete log here). After navigating to the report folder (generated by webpack-bundle-size-analyzer), I found these two files: ...

angularwebpacknativescriptangular2-aotnativescript-angular

Encountering CORS issue while attempting to update information in Angular 9

Whenever I try to use the header in the following manner, everything works fine. However, I encounter a CORS error when attempting to use the put method. Despite multiple attempts, manually hard-coding the body did not resolve the issue and the CORS error ...

angularcorsangular9

Tips for sending an object in AngularJS to the HTTPOST method

I am facing an issue where I am trying to pass an object to my controller using the $http method, but even though the object has a value, the data being passed is showing as NULL. Below is the code snippet that demonstrates this problem. Within my JavaScr ...

javascriptangularjshttp

Definition of Angular 2 File

I have developed a custom Gantt chart library using D3 in vanilla JavaScript. Now, I am trying to integrate it into my Angular 2 application. After installing D3 via npm and adding the necessary type files and the Gantt chart module to node_modules, I enco ...

javascriptangulartypescriptd3.js

The ajax success function is not recognizing the if statement

Looking for help with HTML code <div class="vote"> <div data-post-id="@item.PostId" data-vote-rank="1" class="vote-arrow vote-up glyphicon glyphicon-chevron-up"></div> <div class="total-vote">0</div> <div data- ...

javascriptjqueryajax

Is it possible for me to trigger a custom event using an eventBus listener?

In the Vue component, I have the following setup: data: function() { return { quotes: [] }; }, created() { eventBus.$on("quoteWasAdded", message => { this.quotes.push(message); this.$emit("quotesWereUpdated", this.quot ...

javascriptvue.jsvue-component

Update the color of buttons after being clicked - Bootstrap

If I want to change the class "btn-success" to "btn-warning" or update the color code to "#ffc107" upon a successful process, how can I achieve that? Button ; <button type="submit" name="teklifver" value="Teklif Ver" class="btn btn-block btn-success" ...

javascriptbootstrap-4

Encountering issues when adding information to a React table

Every time I try to submit data, I encounter an error message. Line 53: Expected an assignment or function call and instead saw an expression no-unused-expressions I am attempting to add user-submitted data onto a table as td elements. Could someon ...

javascriptreactjs

Combining Arrays with Identical IDs into a Single Object

When two objects in the data array share the same id, only the first one will be chosen and the rest will be discarded. It is important that multiple assets with the same id are grouped together in one object. const myMap = cardDetails.map((card) => { ...

javascriptreactjs

Error occurs when running Visual Studio Code locally - variable not defined

After successfully going through a Microsoft online demo on setting up an httpTrigger in Visual Studio Code with JavaScript to upload it to Azure Functions, I decided to customize the code for a specific calculation. I managed to get the calculation done a ...

javascriptnode.jsjsonvisual-studio-codeazure-functions

Eliminating choices from a dropdown list using jQuery

I am currently working on a page that contains 5 dropdown menus, all of which have been assigned the class name 'ct'. During an onclick event, I want to remove the option with the value 'X' from each dropdown menu. My current code snipp ...

javascriptjqueryhtml-select

Error message saying 'Callback has already been invoked' returned by an async waterfall function

I'm facing an error that I understand the reason for, but I'm unsure how to resolve it. Here's a breakdown of my initial function: Essentially, I am making a get request for all URLs stored in the database and then, for each URL response, I ...

javascriptnode.jsasync.js

When running the command `npm audit fix --force`, an error is triggered stating that the data path ".builders['app-shell']" must contain the mandatory property 'class'

After installing a package, I received the following message: added 1 package from 8 contributors and audited 49729 packages in 23.754s found 25 vulnerabilities (1 low, 24 high) run `npm audit fix` to fix them, or `npm audit` for details I proceeded to ...

angularnpmangular-cli

How to merge multiple hover effects using JS or JQuery

I am just beginning my journey as a web designer and currently delving into the world of JavaScript for enhancing website functionality. While working on my latest project, I encountered a challenge. I wanted to create a menu where specific elements would ...

javascriptjqueryhtmlcss

conceal the "load more" option when no additional content is available for loading

I recently incorporated a "load more" button using the plugin called "easy load more" (https://wordpress.org/plugins/easy-load-more/). While the button is functioning well, it continues to appear even when there are no more posts to display. I am seeking s ...

javascriptjqueryajaxwordpress

The React Native example is not compatible for running in a web browser

Snippet of code I am attempting to execute: https://github.com/nshaposhnik/react-native-maps-example Currently using Windows 10. My process: Downloaded the code Extracted the files to a folder Set up by performing the following steps after deletin ...

javascriptreact-native

How do I retrieve and display all the locally stored variables in Angular 2/JavaScript and calculate the total number of keys present in the localStorage?

Currently, I'm developing a project in Angular2 that involves the storage of user-added items to a shopping cart. To accomplish this, I have opted to utilize local storage to temporarily save the items. Each category (such as shoes, clothes, etc.) is ...

javascriptangular