Question

使用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

Answer 1

每个角度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-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;
}

这是更新的链接。

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

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

3 个答案: