Send empty object using FormBuilder

Question

Send empty object using FormBuilder

When retrieving an object from a backend API service like this:

data: {firstName:'pepe',lastName:'test', address = {street: 'Cervantes', city:'Villajoyosa'} }
or data: {firstName:'pepe',lastName:'test', address = null }

I am facing an issue where I need to set the object in the formGroup. However, when the address is null, I want to save it as null instead of {street: '', city:''}}

     form = this.fb.group({
            firstName: [''],
            lastName: [''],
            address: this.fb.group({
              street: [''],
              city: [''],
            }),
          });
    // setting the form:
    if(data.address)
    this.form.controls['address'].setValue(data.address)
save(){
valueToSend = this.form.controls['address'].getValue()
}
// template
<button (click)=save()>Save</button>
    <div formGroupName="address">
      <h3>Address</h3>
      <label>
        Street:
        <input type="text" formControlName="street">
      </label>
      <label>
        City:
        <input type="text" formControlName="city">
      </label>
    </div>

angular typescript

Answer 1

Answer №1

Before focusing on the form, make sure to save your data first. During submission process

save()
{
  const data={...this.form.value,address:...this.form.value.address} //<--creating a duplicate
  if (!data.address.city && !data.address.street)
  {
       data.address=null;
  }
  ..perform an action with the data..
  myService.update(data)
}

Answer 2

Before focusing on the form, make sure to save your data first. During submission process

save()
{
  const data={...this.form.value,address:...this.form.value.address} //<--creating a duplicate
  if (!data.address.city && !data.address.street)
  {
       data.address=null;
  }
  ..perform an action with the data..
  myService.update(data)
}

Answer 3

Answer №2

If you've defined a specific form structure, you're constrained to it and may need transformation logic when submitting the form.

One way to handle this is by extracting data from the form fields upon submission:

const { firstName, lastName, address } = this.form;
const value = {
    firstName,
    lastName,
    address: address.street || address.city ? address : null
};

Alternatively, you can create a component that utilizes ControlValueAccessor for this purpose, as shown below:

@Component({
  selector: "app-address",
  template: `
    <div [formGroup]="form">
      <input formControlName="street" />
      <input formControlName="city" />
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AddressComponent),
      multi: true
    }
  ]
})
export class AddressComponent implements ControlValueAccessor, OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      street: [""],
      city: [""]
    });
  }

  writeValue(obj: any): void {
    this.form.setValue(obj);
  }

  registerOnChange(fn: any): void {
    this.form.valueChanges.pipe(map(x => x.city || x.street ? x : null)).subscribe(fn);
  }

  registerOnTouched(fn: any): void {
    //TODO
  }

  setDisabledState(isDisabled: boolean): void {
    //TODO
  }
}

Try out the live demo on Stackblitz

Answer 4

If you've defined a specific form structure, you're constrained to it and may need transformation logic when submitting the form.

One way to handle this is by extracting data from the form fields upon submission:

const { firstName, lastName, address } = this.form;
const value = {
    firstName,
    lastName,
    address: address.street || address.city ? address : null
};

Alternatively, you can create a component that utilizes ControlValueAccessor for this purpose, as shown below:

@Component({
  selector: "app-address",
  template: `
    <div [formGroup]="form">
      <input formControlName="street" />
      <input formControlName="city" />
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AddressComponent),
      multi: true
    }
  ]
})
export class AddressComponent implements ControlValueAccessor, OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      street: [""],
      city: [""]
    });
  }

  writeValue(obj: any): void {
    this.form.setValue(obj);
  }

  registerOnChange(fn: any): void {
    this.form.valueChanges.pipe(map(x => x.city || x.street ? x : null)).subscribe(fn);
  }

  registerOnTouched(fn: any): void {
    //TODO
  }

  setDisabledState(isDisabled: boolean): void {
    //TODO
  }
}

Try out the live demo on Stackblitz

Send empty object using FormBuilder

Answer №1

Answer №2

Similar questions

Creating and verifying variables in a template

Enhance the efficiency of writing the *.d.ts file

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Initialization issue detected in Angular's module APP_INITIALIZER

Issues with the inheritance functionality in styled components are causing errors

What is the best way to combine two calls into a single condition check in React using Typescript?

Is it possible to include multiple eventTypes in a single function call?

Create a Typescript type extension specifically designed for objects with nested arrays of objects

What are the best techniques for centering a prime ng form both vertically and horizontally?

Issues with relocating function during the NgOnInit lifecycle hook in an Angular 2 application

The most secure method for retrieving User Id in AngularFire2

Unable to reach the exposed port of the container

Is there a method to accurately pinpoint the specific type?

Encountering the error message "The argument type 'AsyncThunkAction<*>' cannot be assigned to the parameter type 'Action<any>'" while trying to utilize a custom typed useAppDispatch hook

Implementing strict validation for Angular @Input by allowing only predefined values

There was an error in parsing the module: an unexpected token was encountered during the rendering

"Troubleshooting asynchronous requests in Angular and the issue with Http.get method

What is the correct way to properly parse JSON attributes containing slashes?

"Encountering a problem during the installation of the Angular

Display of environment variables in the production build