0


我用formly建了三个字段。它们一起最多可以达到 100%。
如果两个字段有值，那么自动填充其中一个字段的最佳方法是什么。
例如：

第一个字段：30
第二个字段：20
那么第三个字段应该自动填充：50

什么是“最佳”解决方案？

我已经找到了一种几乎可行的方法，但我确信我的解决方案不是 goto。我使用正式的生命周期挂钩来获取三个字段的当前值并将其发送到服务，并计算其中最后一个字段的值。问题是它产生了大量流量并减慢了我的应用程序。如果我尝试将自己的号码写入最后一个字段，则输入会立即被服务返回的值覆盖。我希望用户能够覆盖自动填充的字段并自动清除其他字段

我的做法：

我的第三个表单字段中的钩子检查是否填写了两个字段：

hooks: {
    doCheck: (field: FormlyFieldConfig) => {
        let fields = field.form.getRawValue();

        if ( 
            fields.fieldOne.value !== null && 
            fields.fieldTwo.value !== null &&
            fields.fieldThree.value  !== calculateFieldsService.calculateFieldThree(
                fields.fieldOne,
                fields.fieldTwo
            )
        ) {
            fields.fieldThree.value = calculateFieldsService.calculateFieldThree(
                fields.fieldOne,
                fields.fieldTwo
            )   
            field.form.setValue({...fields, ...fields} );
        }
    }
}

如果填写了两个字段，则应该计算我的字段值的服务：

@Injectable({
  providedIn: 'root'
})
export class CalculateFieldsService { 

  calculateFieldThree(fieldOne, fieldTwo): number {
    if (fieldOne.value >= 0 && fieldTwo.value >= 0) {
      let fieldValue = 100 - (fieldOne.value + fieldTwo.value);    
      return fieldValue < 0 ? 0 : fieldValue;
    }
    return null;
  }
}
4

1 回答 1

3

IMOdoCheck不是正确的方法，formly有两种方法可以自动填充字段：

expressionProperties: {
  'model.c': (m) => {
    return m.a && m.b ? (m.a + m.b) : null;
  }
}
  • 订阅form.valueChanges
于 2020-01-17T11:12:29.827 回答