Tips for retrieving prefilled data field values within the onsubmit form function in Angular4

I am currently working in Angular 4 and have a requirement to display a form with pre-filled user data. The user should be able to change the data if needed.

 onSubmit(userForm: NgForm) {
    console.log("userform",userForm.value);
             this.next=false;
         var obj = this.storage.retrieve('loginInfo');
         var userId = obj.user_id;
         /* Rest of the code goes here... */
 }
/* Form HTML code goes here... */

I have also implemented another form for editing the data, along with an onSubmit function to capture all field values present in the form. However, I'm facing an issue where I only get the values for fields that have been changed by the user, not the remaining fields with pre-filled data. I need to capture both the modified values and unchanged pre-filled values in the onSubmit function. Here is my code:

angulartypescript

Answer №1

To ensure proper functionality, remember to include [(ngModel)] in each field of the form as demonstrated below:

<form [hidden]="editData" #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
                                        <input type="text" value="{{name}}" placeholder="Enter name" required="" name="name" [(ngModel)]="name">
                                        
<input type="email" value="{{email}}" required="" placeholder="Enter email" name="email" [(ngModel)]="email">

<input type="tel" placeholder="Telephone" placeholder="Enter phone" required="" value="{{phone}}" name="phone" [(ngModel)]="phone">
                                                                                     

   More fields and code here...
 
                                    </form>

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

In Angular, the dropdown in reactive forms will not populate unless there is some interaction with the form

I'm facing an issue with a form that includes 3 dropdowns getting data from an API. The problem is that the dropdowns do not bind data unless I click on them (blur on any field in the form). Here is my HTML: <form [formGroup]="dropdownsForm&q ...

angularbindingdropdownboilerplateangular-reactive-forms

Creating a dynamic list from an array of strings in Angular: A step-by-step guide

Within my .ts component file, I have declared a variable called campaignList as an array of strings. campaignList: string[] I am dynamically populating this list programmatically. In the corresponding HTML file, I have set up a table structure with heade ...

arraysangularlist

Encountering a ReactJs and TypeScript error: "menuItems.map is not a function, issue with map method"

Greetings! I am currently working on implementing the logic of using useState and mapping an array to show only one dropdown item at a time. Below is my array structure with tags (menu name, links (to router), icon (menu icon), and if there are dropdown i ...

javascriptreactjstypescript

Sending Text Input Data from Angular Form to a Restful API

I'm currently working on a project where I need to send data from a reactive form to a REST API running on my local express.js server. The form consists of basic text input fields like name, surname, and email. When the form data is submitted, it is ...

javascriptangularresttypescriptexpress

What is the method for adjusting the font size of the label in an Angular mat-checkbox element?

I've been trying to adjust the font size of a mat-checkbox's label, but no matter what I do, the component's default styles keep overriding my changes: Using !important Trying ::ng-deep Applying a global style in styles.scss <mat-checkb ...

cssangularangular-materialangular-forms

Utilizing ngx admin components for efficient development in Angular 6

I have been working with NGX Admin and I have encountered an issue with reusing components. Specifically, I am trying to integrate smart tables and pie charts into the Dashboard, but I keep running into a template parse error. To address this, I made sure ...

angularangular6ngx-datatableng2-smart-table

Checking for full template type compatibility in Angular 9 reveals cases of incompatible types

I have an Angular (+ Angular Material) 9.1.0 application up and running. Recently, I decided to enhance the type checking in my project's tsconfig.json by adding the following configuration: "angularCompilerOptions": { "strictTemplates": true, ...

angularangular-material

Tips for maximizing efficiency when working with both a collection of items and additional elements inside and outside of the array

I am working with an array of items and need to dynamically add or remove extra items while dragging. The items are being accessed 60 times per second, and I'm curious about the performance impact of my current implementation. class Hello { get con ...

typescript

Troubleshooting the display of API-generated lists in Angular 8

I am encountering an issue in Angular 8 when trying to display my list on a page. Below is the code from my proposal-component.ts file: import { Component, OnInit, Input } from "@angular/core"; import { ActivatedRoute, Params } from "@angular/router"; imp ...

javascriptangulartypescript

Tips for avoiding rule `@angular-eslint/template/i18n` from checking `mat-icon` tags

A strategy I implement is using the rule @angular-eslint/template/i18n to analyze template elements containing text nodes without an i18n attribute. In Angular Material, the identification of icon keys is done through the inner text of mat-icon elements, ...

angularangular-materialeslintangular-i18n

Adding an element within an ngFor iteration loop

I'm currently working on a code snippet that displays items in a list format: <ul> <li *ngFor="#item of items">{{item}}</li> </ul> These items are fetched from an API through an HTTP call. Here's the code snippet for tha ...

javascriptangularangular2-directives

Is it possible for a Docker container to automatically back up its content before launching?

Currently, I am facing a challenge with my Docker setup for an Angular project. The issue arises when the node packages are not already installed, causing it to fail when someone tries to start it after cloning. This is due to the fact that node packages a ...

node.jsangulardockernpm

Can a reducer be molded in ngrx without utilizing the createReducer function?

While analyzing an existing codebase, I came across a reducer function called reviewReducer that was created without using the syntax of the createReducer function. The reviewReducer function in the code snippet below behaves like a typical reducer - it t ...

angulartypescriptreduxngrx

The configuration file for Typescript and Typeorm, specifically the .ts file, is encountering an error

Hello, I'm encountering an issue with my app.ts. When trying to load my settings from ormconfig.ts for the typeorm function that creates the connection, I receive the following error: No overload matches this call. Overload 1 of 3, '(name: stri ...

typescripttypeorm

Guide on Creating a Custom Property within the Same Component in Angular 2

Having trouble defining a custom property called count. When I try to bind it, I get an error saying: Can't bind to 'count' since it isn't a known property of 'p'. How can I fix this issue and successfully make count a custom ...

angular

Showing Angular 2 Data in JSON Format

When I retrieve an object with a Promise, it is structured as follows: export class ShoppingCart { Cart_Items: [ { Id: number, SKU: string, Link: string, ImageURL: string, Title: string, Description: str ...

javascriptjsonangularangular2-services

Using Angular 2+ to make an http-get request with parameters

I am looking to create a GET method with multiple parameters. Currently, my example works with one parameter but I need to add another. In the backend code segment below, you can see where I am trying to pass the second parameter, 'created_by', b ...

angularapi

Executing a function upon clicking the overlay label of jsPlumb in Angular 4

I'm currently using jsplumb in Angular 4 to establish connections between elements. I am also attempting to display a modal with dynamic content when the label of the jsplumb is clicked. Here is the code snippet: component.ts ngAfterViewInit() { ...

angularjsplumb

Challenge with Angular date selection component

I am currently utilizing ngbdatepicker in my form. I want to save the date separately and retrieve it as shown below. <input class="form-control ngbfield custom-form-control" required [ngClass]="{'is-invalid':f.touched && birthDay.inv ...

javascriptangular

Show images from an array of base64 image data

I am currently facing an issue while trying to display images in base64 format within a RadListView component. Within the loop of the component, I have the following code snippet: let base64ImageSource = new ImageSource; base64ImageSource = fromBase64(re ...

angularnativescriptangular2-nativescript