ngx-formly автоматически заполняет одно из трех полей, если два уже определены

Question

Я построил три поля с формально. Вместе они могут иметь максимум 100%.
Какой лучший способ автозаполнения одного из полей, если два имеют значение.
Например:

Первое поле: 30
Второе поле: 20
Тогда третье поле должно автоматически заполняться: 50

Какое "лучшее" решение для этого?

Я уже нашел почти рабочий способ, но я уверен, что мое решение не готово. Я использовал формальные ловушки жизненного цикла, чтобы получить и отправить текущее значение моих трех полей в службу и вычислить значение для моего последнего поля там. Проблема заключалась в том, что он генерировал много трафика c и замедлял мое приложение. Если я попытался записать свой собственный номер в последнее поле, входные данные были мгновенно перезаписаны значением, которое вернул сервис. Я хочу, чтобы пользователь мог перезаписать поле автозаполнения и автоматически очистить другие поля

Мой подход:

Хук в моем третьем поле формы, который проверяет, заполнены ли два поля:

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