Пустые поля не включены в форму отправки при использовании Angular Formly

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>

Я бы предпочел не устанавливать пустую строку в качестве значения по умолчанию для каждого поля.

---

Простой пример можно найти здесь

Answer 1

Вы можете удалить пустые значения в функции отправки вручную, чтобы добиться цели:

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 2

Каждое угловое поле 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 3

Как упоминают Вайбхав, вы также можете попробовать.

Я попытался создать одну функцию, поэтому, если вы не хотите писать 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

Если вы хотите знать только, какие поля нетронуты, тогда вы можете взглянуть на ответ Вайбхава.

Answer 4

вы можете получить поле и установить его свойство с тем, что вы хотите в вашем случае, это будет похоже на

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