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

Question

使用Angular Formly ，我设置了以下 controller 和模板。 我得到 controller 以打印用户在所有字段中输入的值，但用户未触及的值除外。 这意味着如果用户根本没有在字段中写入任何内容，则该字段不包括在内。 尽管如果用户输入某些内容然后将其删除，该字段将包含一个空字符串。

如何包含用户未触及的字段？

// 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>

我不想将空字符串设置为每个字段的默认值。

---

一个简单的例子可以在这里找到

Answer 1

每个angular 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

您可以使用$pristine的帮助，该帮助指示输入字段未从原始值修改。

您甚至可以遍历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
       }
});

Answer 2

正如Vaibhav提到的那样，您也可以尝试。

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

您可以尝试添加此函数，以便它将遍历所有字段，然后设置defaultValue。

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

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

这是更新的链接。

http://jsbin.com/midatefiki/1

如果您只想知道未修改的字段，则可以查看Vaibhav答案。

Answer 3

您可以在提交函数中手动删除空白值，以达到以下目的：

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

Answer 4

你可以根据你的情况获取字段并设置它的属性，就像

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