Empty fields not included on form submit when using Angular Formly

Question

Using Angular Formly I've setup the following controller and template. I get the controller to print the values that the user has entered into all the fields, except those that the user hasn't touched. This means that if the user doesn't write anything at all in a field, that field is not included. Though if the user enters something and then deletes it, the field is included with an empty string.

How do I include the fields that the user hasn't touched?

// fooController.js

vm.fooModel= {};
vm.fooFields = [
    {
        key: 'foo',
        type: 'input'
        templateOptions: {
            label: 'Foo',
            placeholder: 'Foo'
        }
    }
];

vm.onSubmit = function() {
    console.log(vm.fooModel)
}

// fooTemplate.html

<form ng-submit="vm.onSubmit()" novalidate>
    <formly-form model="vm.fooModel" fields="vm.fooFields"></formly-form>
    <button type="submit" class="btn btn-info submit-button">Submit</button>
</form>

I would prefer not to set the empty string as a default value for every single field.

A simple example can be found here

I don't know this module, but what I got for the quick read on the docs that I did is: **you have to use the defaultValue**. — developer033, Aug 05 '16 at 13:44
It's the normail behaviour; if you need a default value like "" (that is not null), just add a foreach on top of submit function to get all null value ad assign "". — MrPk, Aug 08 '16 at 10:39
@MrPk How would you write that foreach? What list would you traverse? — Oskar Persson, Aug 08 '16 at 10:41
pass to submit function the id of the form and get all childrens. With angular it's also possible to get vm.fooFields (it knows what are you submitting) but I'm a bit slow with Angular and I have no time to test that's why I had just a comment — MrPk, Aug 08 '16 at 10:46

score 0 · Answer 1 · answered Aug 09 '16 at 07:20

Each angular js field has following state

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

You can take a help of $pristine which indicates that input field is not modified from the original value.

You can even iterate over the myForm object (non-input-field objects have keys prefixed with a $) and then add into your fooFields object

angular.forEach($scope.myForm, function(value, key) {
  if(key[0] == '$') return;
       console.log(key, value.$pristine)
       if(value.$pristine){
         // add your field in fooFields object
       }
});

score 0 · Answer 2 · answered Aug 09 '16 at 07:34

As Vaibhav mention that also you can try.

I tried to create one function, so if you dont want to write defaultValue for each fields.

You can try to add this functions so it will get iterate over all fields and then set defaultValue.

Note: I have not fully used Angular-formly. So i might not aware of all functionality.

function setDefaultValue(fields){
  for(var i=0;i<fields.length;i++){
    if(fields[i].fieldGroup){
      for(var j=0;j<fields[i].fieldGroup.length;j++){
        fields[i].fieldGroup[j] = setBlankValue(fields[i].fieldGroup[j]);
      }
    }else{
      fields[i] = setBlankValue(fields[i]);
    }
  }
}

function setBlankValue(field){
  if(!angular.isDefined(field.defaultValue)){
    field.defaultValue = '';
  }
  return field;
}

Here is updated link.

http://jsbin.com/midatefiki/1

If you want to know only which fields are untouched then you can take a look at Vaibhav answer.

score 0 · Answer 3 · answered Aug 15 '16 at 10:23

You could remove the blank values in your submit function manually to do the trick:

vm.onSubmit = function() {

  angular.forEach( vm.fooModel, function( value, key ) {
    if(value == ''){ // == is intentional

      // pick one from
      delete vm.fooModel[ key ]
      // or
      vm.fooModel[ key ] = null
    }
  });
  console.log(vm.fooModel)
}

score 0 · Answer 4 · answered Feb 09 '22 at 10:20

0

you can get field and set property of it with what you want in your case, it will be like

this.fooFields.get('fieldName').setValue('');

answered Feb 09 '22 at 10:20

Ayman Ali

211
2
12

Empty fields not included on form submit when using Angular Formly

4 Answers4