eliminate element from formBuilder

When I execute formBuild.group, I am creating two temporary values for validation purposes only. These values are not intended to be saved in the database, so I need to remove them before saving.

profile.component.ts:

profileForm: FormGroup;

constructor(){
    this.profileForm = this.createPerfilForm();
 }

createProfileForm() {
    return this.formBuilder.group({
        id: [this.perfil.id],
        name: [this.perfil.name, [Validators.required, Validators.minLength(5), Validators.maxLength(45)]],
        email: [this.perfil.email, [Validators.required, Validators.email]],
        password: [''],
        passwordConfirm: ['', [confirmPassword]],
    });
}

saveProfile(){
     // Need to strip out password and passwordConfirm 
     //before database save
     this.authService.updateProfile(this.profileForm.value);
}

I must exclude this.profileForm.value from the password and passwordConfirm fields since these values should not be stored in the database.

angulartypescriptfirebaseangular-forms

Answer №1

saveUserInfo(){
     // Make sure sensitive information like password and confirm password are not saved
     // in the database
     let userInfoCopy = { ... this.userInfoForm.entries };
     delete userInfoCopy.password;
     delete userInfoCopy.confirmPassword;
     this.userService.updateUserInfo(userInfoCopy);
}

How about giving this a shot?

Answer №2

Create a fresh item using only the necessary elements:

 const newData = this.userService.createData({id: this.formData.value.id, 
           username: this.formData.value.username, email:this.formData.value.email })

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

What is the best way to utilize the existing MUI state in order to calculate and show column totals?

I am currently in the process of developing an MUI web application to keep track of some personal data. Within this application, I have incorporated the MUI datagrid pro component to efficiently display the data with its robust filtering capabilities. In ...

javascriptreactjstypescriptmaterial-uimui-x-data-grid

What are the steps for integrating bootstrap into an Angular project?

I recently added Bootstrap to my Angular project using the npm install bootstrap command and referencing the necessary CSS file in the styles property of the angular.json file. However, when I run my application, I notice that Bootstrap is not being applie ...

angulartwitter-bootstrap

Ways to retrieve a value from a JavaScript function without using the return statement

I wrote a Javascript method as follows: function ServerSideDatasource(server) { return { getRows: function (params) { var response = server.getData(params.request).then((res) => { var result = { success: true, ...

javascripttypescript

Lazy loading a child component in Angular 8: A step-by-step guide

In my project, I have a complex component that consists of multiple modals (NgbModal). These modals are connected to various child components. My goal is to implement lazy loading for these child components. Dashboard Module | |--> Dashboa ...

angularangular6lazy-loadingangular8angular9

Angular Ahead-of-Time (AOT) compilation causes multiple route definitions to be

Having a bit of trouble configuring ahead-of-time compilation for my lazy-loaded Angular app. The lazy-loaded routes are specified in the app.routes.ts file, which is imported by app.module.ts. Running ngc results in the content of app.routes.ts being mer ...

angulartypescriptwebpackangular2-aot

What sets apart passing arguments to a function from utilizing variables at the class level?

As someone who is just starting out in the Typescript and Angular-2 world, my previous experience includes working with Java and Angular-1.5. Imagine a scenario where there is a component class with several variables that need to be used across functions, ...

javascriptangulartypescript

Guide on integrating jQuery list filtering in Ionic 2

I stumbled upon a jQuery function that filters data in HTML, found it online. Now, I want to incorporate a similar feature into my Ionic app. However, I am unsure about the modifications required in list-search-min.js. Here is a snippet of my index.html: ...

javascriptjqueryangularionic-frameworkionic2

Count duplicated values in an array of objects using JavaScript ES6

I am working on creating a filter for my list of products to count all producers and display them as follows: Apple (3) I have managed to eliminate duplicates from the array: ["Apple", "Apple", "Apple"] using this helpful link: Get all non-unique values ...

javascriptarrayshtmlangulartypescript

Stop users from logging in simultaneously on multiple systems

It is possible for the same user and password to be used on multiple computers simultaneously! If person 1 is logged in with a certain username and person 2 logs in from another computer or browser using the same credentials, person 1 will not be automatic ...

node.jsangularmongodbauthenticationbackend

Creating a Custom Select Option Component with Ant Design Library

Is it possible to customize options in an antd select component? I have been trying to render checkboxes alongside each option, but I am only seeing the default options. Below are my 'CustomSelect' and 'CustomOption' components: // Cu ...

javascriptreactjstypescriptantd

What is the reason `addEventListener` does not work with a class method?

Recently, I discovered that the listener passed to addEventListener can actually be an object with a handleEvent function instead of just a callback function (here). However, I encountered an issue when trying to use handleEvent as a class method: class F ...

javascripttypescript

Angular: Display or Conceal button when hovering over a div

I am working on a small Angular project that involves displaying a list of cars after performing a search action in the database. I am looking to implement a feature where, when a user hovers over the <div class="about">, a button (<button class=" ...

angularhideshowonmouseover

Confirming user identity using Firebase Authentication

We are in the initial stages of developing a web application and are considering utilizing Firebase Authentication for managing our sign up process. However, we have some uncertainty regarding the process of verifying ID tokens. It appears that user verifi ...

node.jsfirebasefirebase-authenticationfirebase-admin

Saving numerical data from Firebase using Vue.js

I am currently using Firebase in combination with Vue.js. When saving data to the database, I execute the following command: saveEvent(){ db.collection('events').add({ title: this.title, content: this.content, start: this.start, ...

stringfirebasevue.jsgoogle-cloud-firestorenumbers

strategies for chaining together multiple observables with varying data types and operations

Hey everyone! I'm facing a situation where I have a form with multiple select types, and the options for these inputs are coming from an API. I then take the data emitted from the HTTP request observable and feed it into my FormGroup, and everything i ...

javascriptangulartypescript

Retrieving video tag source dimensions using Angular 2

Currently, I am in the process of constructing a video component and finding a way to obtain the dimensions of the source video (either the source file or the container) so that I can pass it to another component. I have incorporated the following code: / ...

javascripthtmlangular

Steps for activating Brotli compression in Nginx and Docker for an Angular Application

For my Angular application using Docker, I have implemented Brotli compression on Nginx by adding commands to the Dockerfile and enabling brotli in the nginx/default.conf file. nginx/default.conf: server { brotli on; brotli_static on; listen ...

angularlinuxdockernginxbrotli

utilizing tabview for component replacement

Having trouble changing components in Angular 7 with PrimeNG tabview tabs? Need some assistance? I have a setup with 3 components, and I want to switch between them when clicking on the panel inside the tabview. I've tried using onchange functions i ...

htmlangulartypescriptprimeng

determine the values of objects based on their corresponding keys

Still on the hunt for a solution to this, but haven't found an exact match yet. I've been grappling with the following code snippet: interface RowData { firstName: string; lastName: string; age: number; participate: boolean; } c ...

typescripttypestype-inference

Exploring the Angular 2 ngFor Directive's Impact on View Lifecycle Triggers

Is there a way to trigger an animation after updating an array of values that is bound to the template HTML using *ngFor? In order for my animation to be meaningful, it needs to be triggered after the view has been updated with the most current values. I ...

typescriptangularlifecycleangular2-template