Bootstrap input group - удаление 1 значения из группы очищает все значения в пользовательском интерфейсе - PullRequest
0 голосов
/ 10 июля 2019

У меня есть угловая форма, которая использует группу ввода с полями для поиска транзакций с денежной суммой от (> =), суммой до (<=) и суммой, равной (=).Эти значения отправляются серверной службе через 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">&nbsp;&nbsp;&nbsp;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">&gt;=</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">&lt;=</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 [ключ]», фактически вызывает проблему.Скажем, как описано в приведенной выше сводке, сумма очищается, поэтому этот код видит, что значение пустое, и удаляет его из карты фильтра.Сумма от значения по-прежнему находится на карте фильтра, но она не отображается в событии пользовательского интерфейса, хотя она все еще находится в модели

Я ожидаю, что сумма из значения остается и не очищается, но это то, что на самом делеслучается:

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

enter image description here

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

enter image description here

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

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...