Угловая схема формы - как я могу создать "общее" поле

Question

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

Answer 1

Возможно, самый простой способ - позволить пользователю предоставить ключи полей, которые вы хотите суммировать, и наблюдать за изменениями с помощью $watchGroup

Итак, пример того, как может выглядеть определение формы:

{
  type: "sum",
  sumFields: [
    "key.to.field1",
    "key.to.field2",
    "key.to.field3"
  ]
}

И тогда вам нужна директива в вашем поле типа sum для суммирования. (ВНИМАНИЕ, непроверенный код)

<div class="form-control-group"> 
  <input disabled sum-it-up="form.sumFields" type="text">
</div>


angular.module('myModule').directive('sumItUp',function(){
  return {
    scope: true,
    link: function(scope, element, attr) {
      var keys = scope.$eval(attrs.sumItUp);.map(function(key){
         // Whatever you put in model is always available on scope
         // as model. Skipped ObjectPath for simplification.
         return 'model.'+key 
      }) 
      scope.$watchGroup(keys, function(values) {
        element.value(values.reduce(function(sum, value){ 
          return sum+value
        },0))
      })
    }
  }
})

Вы также можете сделать что-то типа fieldset и пройтись по каждому элементу в items свойство формы и оттуда. sfSelect услуга также может быть полезной. Надеюсь, это поможет!