angular-formly - 角度形式为 : calculate value of one field based on other fields input

Question

json 配置:

{
    "moduleconfigs": {
      "create": [
        {
          "key": "Committed",
          "type": "horizontalInput",
          "templateOptions": {
            "label": "Committed"
          }
        },
        {
          "key": "Uncommitted",
          "type": "horizontalInput",
          "templateOptions": {
            "label": "Uncommitted"
          }
        },
        {
          "key": "Line",
          "type": "horizontalInput",
          "templateOptions": {
            "label": "Line"
          }
        },{
          "key": "Total",
          "type": "horizontalInput",
          "templateOptions": {
            "label": "Total"
          },
          "expressionProperties":{
            "value": function($viewValue, $modelValue, scope){
                return scope.model.lineFill+scope.model.uncommitedBPD+scope.model.commitedBPD;
            }
          }
        }
        ]
    }
}

html:

 <form>
     <formly-for model="vm.myModel" fields="vm.myFields"></formly-form> </form>

我是 Angular 的新手。我正在使用 Angular Formly json 创建表单。总计字段应显示“已提交”+“未提交”+“行”字段中提供的值的总和。我正在使用 expressionProperties 但不起作用。

Answer 1

我猜您已经解决了这个问题...但是...

你做错了两件事。

第一(1):它们在正式字段配置对象中的键值是在模型上按该名称设置值。

所以你的第一个字段配置对象是:

{
  "key": "Committed",
  "type": "horizontalInput",
  "templateOptions": {
    "label": "Committed"
  }
},

然后，您尝试使用键 commitedBPD 访问该值，因此您将始终无法定义。

基本上形式是使用 Comlated 键设置模型对象上该字段中的输入值，您需要更改键以匹配。

第二 (2):我可能是错的，但我认为您不能使用表达式属性来设置这样的值。 Formly 会自动尊重模型上的值更改，因此您最好在其他 Formly 字段配置对象上放置 onChange 来进行解析和添加，如下所示:

{
  "key": "Committed",
  "type": "horizontalInput",
  "templateOptions": {
  "label": "Committed"
    "onChange": addTotal
  }
}...


function addTotal() {
  //You have access to the model here because it's in your controller
  // NOTE: the parseInput function you'll have to write yourself
  vm.model.Total = parseInput(vm.model.Committed) + ...
}

总而言之，您最大的问题是尝试使用错误的键访问模型对象中的值