使用Angular Formly时，表单中未包含的空字段会提交

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.

使用Angular Formly我已经设置了以下控制器和模板。我让控制器将用户输入的值打印到所有字段中,但用户未触摸的字段除外。这意味着如果用户在字段中根本不写任何内容,则不包括该字段。虽然如果用户输入内容然后将其删除,则该字段包含空字符串。

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

这里有一个简单的例子

3 个解决方案

#1

Each angular js field has following state

每个角度js字段具有以下状态

$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.

您可以获取$ pristine的帮助,这表示输入字段未从原始值修改。

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

您甚至可以迭代myForm对象(非输入字段对象的前缀为$),然后添加到您的fooFields对象中

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

#2

As Vaibhav mention that also you can try.

正如Vaibhav提到的那样你也可以试试。

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

我试图创建一个函数,所以如果你不想为每个字段写defaultValue。

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

您可以尝试添加此函数,以便迭代所有字段,然后设置defaultValue。

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

注意:我还没有完全使用Angular-formly。所以我可能不知道所有的功能。

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.

如果您只想知道哪些字段未被触及,那么您可以查看Vaibhav答案。

#3

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

#1