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
: 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