Fill out FormBuilder using data from a service within Angular2

I am working with an Angular2 model that I'm filling with data from a service. My goal is to use this model to update a form (created using FormBuilder) so that users can easily edit the information.

Although my current approach works, I encounter errors for fields in my model that don't have corresponding form controls.


  ...
  ngOnInit(): void {
    this.buildForm();
    this.fetchData('1');
  }
  
  fetchData(id: string) {
    this.myModelsService.get(id)
      .subscribe(
        data => {
          this.myModel = data;
          this.myForm.setValue(data);
        },
        error => console.log(error)
      );
  }

While this method is functional, I keep getting errors like

Cannot find form control with name: incidentTimeStamp
.

Should I start by removing attributes that don't have matching form controls? Or are there better strategies to achieve what I need?

Populating fields for editing is a fundamental requirement, and it seems more complex than necessary in this case.

Answer №1

To solve the problem, consider utilizing FormGroup.patchValue()

It is important to note that FormGroup.setValue() performs strict validations, whereas FormGroup.patchValue() does not.

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

Discover how to display the loading time and memory usage of a web page on the footer using the jQuery and AngularJS library

Does anyone know how to display the loading time and memory usage of a web page in the footer using jQuery and AngularJS libraries? I've managed to show the loading time with this jQuery code: <script type="text/javascript"> before = (new Date( ...

Angular Link Panel

I'm working on a marketplace app and I need to display a picture and name of a product when someone shares a link. Similar to how social media posts include a picture and title when shared. Can this be achieved using Angular, and if so, what steps do ...

Can someone please help me convert this jQuery code into vanilla JavaScript?

My Cordova app has an email sending function that utilizes jQuery. During debugging, the ajax function works perfectly in my browser, but once I build the app and test it on my phone, it stops working. I encountered a similar issue before, which was resolv ...

Tips for choosing a dynamically generated ajax element

Question for you: I have a snippet of HTML code that looks like this: <li class='entry'> <div class='entryContent'> <p class='entryText'>Entry text></p> <a href="#" c ...

When creating a new instance of a class, I make sure to use the

I am facing an issue when trying to call a function from ClassA within my mainClass, and vice versa. I have attempted using .bind() and .call(), but it only works when I use .bind(this) or .call(this) on functions, not when I try to instantiate a new class ...

How to bypass CORS restrictions in XMLHttpRequest by manipulating HTTP headers?

Currently experimenting with the (deprecated) Twitter API 1.0 For instance, I am interested in retrieving data from the API utilizing AJAX browser requests on cross-origin web pages. This could be a new tab, a local HTML file, or any established website. ...

Angular JS Introductory Module

Currently, I am encountering an issue in AngularJS 1.2.15 marked by $injector:modulerr. Interestingly, the application runs smoothly when hosted on a MAMP Apache server locally, but encounters errors when running on a node server, generating the error mess ...

JavaScript popup confirmation in an MVC3 AJAX form

I have implemented an ajax form in a MVC3 project and I am looking for a way to incorporate a JavaScript confirm popup upon clicking the submit button. While I have managed to get the popup to display, I am struggling to prevent the form submission if the ...

What is the best way to incorporate Drift bot JS code into a static React NextJs application, such as a landing page?

I'm a beginner with ReactJS and I recently created a static website using ReactJS & NextJs. I decided to integrate a chatbot called 'Drift', but when following the installation instructions to insert JavaScript code in the <head> of HT ...

Add motion to the div element when hovering and moving the mouse away

Looking to add animation to a list moving from left to right and vice versa. Now, I want the list to animate from left to right when the mouse hovers over the div, and then animate from right to left when the mouse leaves the div. Can someone assist me wit ...

Angular 2 Integration for Slick Carousel

Greetings! I have recently ventured into Angular 2 and am currently attempting to get a carousel plugin called slick up and running. After some trial and error, I have successfully implemented it as a Component in the following manner: import { Component ...

The Slice method is malfunctioning after the array has been filtered

I am currently working on creating a news portal app using Next JS, Redux, mongoose, and Express. My Issue is: While I am able to filter specific items from an array successfully, I encounter problems when attempting to display a specific number of items, ...

Attempting to integrate a complex Ruby operation (using each loop and iterator) into a JavaScript platform (such as Google Charts API) by creatively combining them in a non-conventional manner during the development phase

It's time for my application to transition into production mode, and I have come to the realization that some of the code in development mode needs a major overhaul. Particularly, the views where I embedded data iteratively into Google Charts API Java ...

Tips for implementing a handler on a DOM element

$(document).ready(function(){ var ColorBars = document.getElementsByClassName("color-bar"); var number = 0; ColorBars[0].onclick = hideLine(0); function hideLine(index){ var charts = $("#line-container").highcharts(); v ...

Utilizing Vue.js to share a single array of data across two distinct input lists

For a clearer understanding of my requirements, I have put together a demo on JSFiddle: https://jsfiddle.net/silentway/aro5kq7u/3/ The code snippet is presented below: <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id=" ...

Include an element in a secondary list based on its position in the initial list

Having 2 lists presents a challenge. An Angular service is utilized with a splice-based method to remove items from the first list (named "items") according to their index through a ng-click action. service.removeItem = function (itemIndex) { items ...

Adding color to characters, digits in an HTML file

Is it possible to individually style each letter, number, and symbol in an HTML document with a unique color? I am interested in creating a text editor that applies specific colors to each glyph for those who have grapheme-color synesthesia. While there ar ...

The Express middleware is not being utilized

There seems to be an issue with the middleware in the code below that is supposed to create a property req.user if req.session.user exists. Unfortunately, it appears that the middleware is not being triggered, causing 'hihihhiihi' to not be print ...

What causes the error message "No exported member 'ɵɵFactoryDeclaration' in @angular/core/core" to appear during project compilation?

I am facing an issue where the global Angular CLI version is 13.0.1 and the local version in my project is 10.2.3. Despite making changes to some components (without touching package.json), I encountered an error during the build step of my bitbucket pipel ...

Retrieve the list of device tokens for the APNS service

Is it possible to retrieve a list of all device tokens on which my app is installed through an APNS endpoint? I am aware of the feedback service that provides the status of devices to whom messages are sent, but I believe this is only after the message ...