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

【问题标题】：Empty fields not included on form submit when using Angular Formly使用 Angular Formly 时，表单提交中不包含空字段
【发布时间】：2016-12-11 22:33:26
【问题描述】：

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

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

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

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

一个简单的例子可以找到here

【问题讨论】：

我不知道这个模块，但是我快速阅读我所做的文档得到的是：你必须使用 defaultValue。
这是正常的行为；如果您需要像“”这样的默认值（不为空），只需在提交函数顶部添加一个 foreach 即可获取所有空值广告分配“”。
@MrPk 你会怎么写那个foreach？你会遍历什么列表？
将表单的id传递给提交函数并获取所有子项。使用 Angular 也可以获得 vm.fooFields （它知道你在提交什么），但我对 Angular 有点慢，我没有时间测试这就是为什么我只有一个评论

标签： javascript html angularjs forms angular-formly

【解决方案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
       }
});

【讨论】：

【解决方案2】：

正如 Vaibhav 所说，您也可以尝试。

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

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

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

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 的答案。

【讨论】：

【解决方案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)
}

【讨论】：

【解决方案4】：

您可以根据需要获取字段并设置其属性在你的情况下，它会像

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

【讨论】：