Discover the power of Angular 8: Automatically mapping member data with Reactive Form Automap and efficiently setting values

Question

Discover the power of Angular 8: Automatically mapping member data with Reactive Form Automap and efficiently setting values

Is there a simple method to patch an Angular form using auto mapper? I am looking to transfer member names from a class directly into the form without having to manually write out each one. This is especially important as my company has many forms and I want to follow the DRY principle to avoid repetitive coding, etc.

this.editAddressForm.patchValue({
     'streetNumber':  this.addressMailingData.streetNumber,
     'predirectional':  this.addressMailingData.predirectional,
     'streetName':  this.addressMailingData.streetName,
     'streetType':  this.addressMailingData.streetType,
     'postdirectional':  this.addressMailingData.postdirectional,
     'city': this.addressMailingData.city,
     'state': this.addressMailingData.state,
     'postalCode':  this.addressMailingData.postalCode

Possible Solution: When attempting to do this by simply passing in the entire addressMailingData object like below, an error occurs:

this.editAddressForm.patchValue(this.addressMailingData);

Error: Argument of type 'string' is not assignable to parameter of type '{ [key: string]: any; }'

javascript css angular typescript angular8

Answer 1

Answer №1

For updating an object with matching values in form model and data, use the following code snippet:

this.updateObjectForm.patchValue(this.objectData);

Answer 2

For updating an object with matching values in form model and data, use the following code snippet:

this.updateObjectForm.patchValue(this.objectData);

Answer 3

Answer №2

Adding a touch of personalization:

applyCustomChanges(keys : string[], data: any, formgroup: FormGroup):

Parameters:

keys: A collection of strings to be mapped to the formgroup
data: Object containing values to be set for the formGroup
formGroup: The specific Formgroup where changes will be applied

applyCustomChanges(keys: string[] = null, data: any, formGroup: FormGroup) {
  Object.keys(data).forEach(key => {
    if (!keys || keys.length == 0 || keys.some(x => x == key)) {
      formGroup.patchValue({ [key]: data[key] })
    } else {
      console.log("Non matching key", key);
    }
  });
}

Snippet of TypeScript Code:

import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  form: FormGroup;

  obj: any = { name: "John", surname: "Doe" };

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(""),
      surname: new FormControl("")
    });
    
    this.applyCustomChanges(['name'], this.obj, this.form);
  }

  applyCustomChanges(keys: string[] = null, data: any, formGroup: FormGroup) {
    Object.keys(data).forEach(key => {
      if (!keys || keys.length == 0 || keys.some(x => x == key)) {
        formGroup.patchValue({ [key]: data[key] })
      } else {
        console.log("Non matching keys", key);
      }
    });
    return formGroup;
  }
}

See Demo Here

Answer 4

Adding a touch of personalization:

applyCustomChanges(keys : string[], data: any, formgroup: FormGroup):

Parameters:

keys: A collection of strings to be mapped to the formgroup
data: Object containing values to be set for the formGroup
formGroup: The specific Formgroup where changes will be applied

applyCustomChanges(keys: string[] = null, data: any, formGroup: FormGroup) {
  Object.keys(data).forEach(key => {
    if (!keys || keys.length == 0 || keys.some(x => x == key)) {
      formGroup.patchValue({ [key]: data[key] })
    } else {
      console.log("Non matching key", key);
    }
  });
}

Snippet of TypeScript Code:

import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  form: FormGroup;

  obj: any = { name: "John", surname: "Doe" };

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(""),
      surname: new FormControl("")
    });
    
    this.applyCustomChanges(['name'], this.obj, this.form);
  }

  applyCustomChanges(keys: string[] = null, data: any, formGroup: FormGroup) {
    Object.keys(data).forEach(key => {
      if (!keys || keys.length == 0 || keys.some(x => x == key)) {
        formGroup.patchValue({ [key]: data[key] })
      } else {
        console.log("Non matching keys", key);
      }
    });
    return formGroup;
  }
}

See Demo Here

Discover the power of Angular 8: Automatically mapping member data with Reactive Form Automap and efficiently setting values

Answer №1

Answer №2

Similar questions

What is the process for creating a tab logo?

What is the method for making an interface extension from a type as optional?

Encountering a 415 Error while making an ajax call using formData

What is the best way to evaluate the rows of two specific elements?

Executing a webservice method in an html page using javascript without the need to refresh the page

"Despite being on a right-to-left page, Mat-icon still adheres to rules for left-to

To display the elements of an array in a dropdown menu

The TypeScript factory class anticipates an intersection

I have implemented a button in PHP and now I am looking to invoke a function when that button is clicked

PHP is encountering issues when attempting to dynamically add rows using JavaScript

Establish the condition if the array is present

`Advancing Angular Bootstrap popover placement in response to varying circumstances`

Issue with floating right navigation functionality

Is there a way to implement seamless scrolling within an absolute element using Jquery?

Angular: Effective communication between components through routing and Observable binding ultimately results in the advancement of ngtsc(233

Tips for comparing array objects in two separate React states

Tips for extracting a value from a mongodb aggregate operation

Is there a native feature in Vue.js that allows for the addition of a duplicate of a constantly saved object to an array that is repeated

Image-switching button

Encountering an abrupt conclusion in JSON input while utilizing cucumber-html-reporter alongside Nightwatch-Cucumber