У меня есть угловая форма, которая использует группу ввода с полями для поиска транзакций с денежной суммой от (> =), суммой до (<=) и суммой, равной (=).Эти значения отправляются серверной службе через REST.Если, например, сумма от и сумма для входных данных в группе введена, и я нажимаю кнопку фильтра, тогда результаты возвращаются, как и ожидалось.Если я удаляю одно из значений, например, сумма в поле ввода, и нажимаю кнопку поиска, возвращаются правильные результаты, однако сумма из текстового поля также очищается.Есть ли способ предотвратить это? </p>
Вот HTML-код для моей группы ввода:
<div class="form-group row">
<div class="col-sm-3" style="max-width: 6%">
<label class="col-sm-3 text-sm-right col-form-label"> Amount</label>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon">>=</span>
<input numbersOnly type="text" name="amount" id="amountFrom" class="form-control form-control-sm" [(ngModel)]="filter.amountFrom">
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon"><=</span>
<input numbersOnly type="text" name="amount" id="amountTo" class="form-control form-control-sm" [(ngModel)]="filter.amountTo">
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon">Or=</span>
<input numbersOnly type="text" name="amount" id="amountEqual" class="form-control form-control-sm" [(ngModel)]="filter.amountEqual">
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<label for="currency" class="col-sm-3 text-sm-right col-form-label">Currency</label>
<div class="col-sm-9">
<select class="small form-control form-control-sm" name="currency" id="currency" [(ngModel)]="filter.currency">
<option [value]="undefined" [selected]="filter.currency == undefined">All</option>
<option *ngFor="let currency of currencies | orderBy:'description'" [value]="currency.code">{{currency.description}}</option>
</select>
</div>
</div>
</div>
</div>
При нажатии кнопки фильтра выполняется следующий код, который в основном проверяет все пустыеили нулевые значения и удаляет их из фильтра поиска перед отправкой в службу поддержки:
/**
* Trim search params and remove nulls
*/
trimFilter(params: SearchParams): void {
Object.keys(params).forEach(key => {
const value = params[key];
if (value === null || value === undefined || (typeof value === 'string' && value.trim().length === 0)) {
delete params[key]
}
});
}
Строка, в которой она вызывает «delete params [ключ]», фактически вызывает проблему.Скажем, как описано в приведенной выше сводке, сумма очищается, поэтому этот код видит, что значение пустое, и удаляет его из карты фильтра.Сумма от значения по-прежнему находится на карте фильтра, но она не отображается в событии пользовательского интерфейса, хотя она все еще находится в модели
Я ожидаю, что сумма из значения остается и не очищается, но это то, что на самом делеслучается:
Сумма от и сумма для ввода и нажатие кнопки фильтра, и значение ввода в полях в порядке:

Iудалите сумму из значения поля и нажмите кнопку фильтра, которая приводит к его удалению из фильтра:

Сумма из значения все еще находится вмодель, но она была очищена от суммы из текстового поля: