如果已经定义了两个字段，则 ngx-formly 自动填充三个字段之一答案

【问题标题】：ngx-formly autofill one of three fields if two are already defined如果已经定义了两个字段，则 ngx-formly 自动填充三个字段之一
【发布时间】：2020-05-04 03:08:06
【问题描述】：

我用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;
  }
}

【问题讨论】：

标签： angular typescript angular-services autofill ngx-formly

【解决方案1】：

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

使用expressionProperties:https://stackblitz.com/edit/ngx-formly-ui-bootstrap-4ryvgk

expressionProperties: {
  'model.c': (m) => {
    return m.a && m.b ? (m.a + m.b) : null;
  }
}

订阅form.valueChanges

【讨论】：