Ensure Angular Reactive Forms do not include empty fields when submitting the form

Question

Ensure Angular Reactive Forms do not include empty fields when submitting the form

Is there a way to retrieve only the fields with values entered by the user from a form and exclude empty fields in the resulting JSON object? Currently, the JSON object still includes empty quotation marks for empty inputs. Thank you!

Current:

{ "user": "", "directory": "documents", "filename": [ "a", "", "" ] }

Desired Output:

{ "directory": "documents", "filename": [ "a" ] }

javascript angular typescript

Answer 1

Answer №1

In the scenario where form controls are not given an empty value, they will automatically default to null.

If you are constructing your form in the following manner:

import { Component } from '@angular/core';
import { FormBuilder, FormArray } from '@angular/forms';

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

  constructor(private fb: FormBuilder) {}

  userForm = this.fb.group({
    user: [],
    directory: [],
    filename: this.fb.array([])
  });

  addFile() {
    (<FormArray>this.userForm.get('filename')).push(this.fb.control(null));
  }

  get files() {
    return (<FormArray>this.userForm.get('filename')).controls;
  }

  onSubmit() {
    console.log(this.userForm.value);
  }

}

Any unfilled fields in the form would be interpreted as null. To exclude these from the value, consider the following approach:

onSubmit() {
  let formValue = { ...this.userForm.value };

  for (let prop in formValue) {
    if (!formValue[prop]) {
      delete formValue[prop];
    }

    if (Array.isArray(formValue[prop])) {
      let resultArray = formValue[prop].filter(item => item);
      if (resultArray.length > 0) {
        formValue[prop] = resultArray;
      } else {
        delete formValue[prop];
      }
    }
  }
  console.log(formValue);
}

For reference, here is a Sample StackBlitz of this implementation.

Answer 2

In the scenario where form controls are not given an empty value, they will automatically default to null.

If you are constructing your form in the following manner:

import { Component } from '@angular/core';
import { FormBuilder, FormArray } from '@angular/forms';

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

  constructor(private fb: FormBuilder) {}

  userForm = this.fb.group({
    user: [],
    directory: [],
    filename: this.fb.array([])
  });

  addFile() {
    (<FormArray>this.userForm.get('filename')).push(this.fb.control(null));
  }

  get files() {
    return (<FormArray>this.userForm.get('filename')).controls;
  }

  onSubmit() {
    console.log(this.userForm.value);
  }

}

Any unfilled fields in the form would be interpreted as null. To exclude these from the value, consider the following approach:

onSubmit() {
  let formValue = { ...this.userForm.value };

  for (let prop in formValue) {
    if (!formValue[prop]) {
      delete formValue[prop];
    }

    if (Array.isArray(formValue[prop])) {
      let resultArray = formValue[prop].filter(item => item);
      if (resultArray.length > 0) {
        formValue[prop] = resultArray;
      } else {
        delete formValue[prop];
      }
    }
  }
  console.log(formValue);
}

For reference, here is a Sample StackBlitz of this implementation.

Ensure Angular Reactive Forms do not include empty fields when submitting the form

Answer №1

Similar questions

Creating an If statement tailored for a particular image source: a step-by-step guide

Exploring Particles with three.js

Combining Angular and Material Design: matdrawer and mattoolbar creating an overlapping effect

Issues with Ajax calls not functioning properly within CakePHP

Manipulate the text within a swf file using jQuery

When executing code in React JS, I encountered no errors, but the output did not match my expectations

How to shuffle the elements of an array saved in a JSON file using discord.js

Plunker fails to run simple AngularJS demo

What is the process for listening to custom events in Angular 4 components that have been loaded using routing?

NodeJs ERROR: Module not found

The concept of setTimeout and how it affects binding in JavaScript

Is there a way to incorporate a custom method into a JQuery tab widget?

My table elements are automatically being populated with <tr> elements thanks to Javascript

JavaScript Popup prompting user on page load with option to redirect to another page upon clicking

Error message: "AngularJS encountered a $injector:modulerr error in Internet Explorer 11."

Difficulty triggering an event within a collection in Backbone.js

Set a restriction on the Bootstrap DatePicker to only show dates within a

Is there a way to automatically initiate the download of a file (such as a PDF) when a webpage loads?

Error encountered: JSHint is flagging issues with setting a background gradient using

Prevent Angular Router from Initiating NavigationStart