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

Question

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

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

"best" 解决方案是什么？

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

我的做法：

我的第三个表单字段中的挂钩，用于检查两个字段是否已填充：

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

Answer 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

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

ngx-formly autofill one of three fields if two are already defined

autofill

typescript

angular-services

angular

ngx-formly