Formulaire réactif Angular - Exclure les champs vides lors de la soumission du formulaire

Question

Je essaye de récupérer uniquement les champs du formulaire avec les valeurs entrées par l'utilisateur. L'objet JSON résultant contient toujours des guillemets vides pour les entrées vides (voir ci-dessous). Existe-t-il un moyen d'exclure les champs vides lors de la soumission du formulaire? Merci!

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

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

Answer 1

Si vous n'assignez pas une valeur vide aux contrôles du formulaire, ils seront automatiquement null.

Considérant que c'est ainsi que vous créez votre formulaire :

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() {
    (this.userForm.get('filename')).push(this.fb.control(null));
  }

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

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

}

La valeur du formulaire serait null pour les champs non remplis. Vous pouvez ensuite les supprimer de la valeur comme ceci :

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);
}

Voici un Exemple StackBlitz pour votre référence.