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


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

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

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

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

Мой подход:

Хук в моем третьем поле 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;
  }
}

1 ответ

Решение

ИМО doCheck не правильный путь, с formly Есть два способа автозаполнения поля:

expressionProperties: {
  'model.c': (m) => {
    return m.a && m.b ? (m.a + m.b) : null;
  }
}
  • Подписаться на form.valueChanges
Другие вопросы по тегам