Bootstrap输入组-从组中清除1个值将清除UI上的所有值

Question

我有一个Angular形式，它使用带有字段的输入组来搜索货币金额为（> =），金额为（<=）和金额等于（=）的交易。这些值通过REST发送到后端服务。例如，如果输入了组中的输入金额和输入金额，则单击过滤器按钮，然后按预期返回结果。如果我清除输入框中的“ to to”的值之一，然后单击“搜索”，则返回正确的结果，但是“文本”中的“ value”也被清除。有办法防止这种情况发生吗？

这是我的输入组的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 [key]”的行实际上是导致此问题的原因。像上面总结中所述的那样，to被清除，因此该代码将看到该值为空，并将其从过滤器映射中删除。来自值的金额仍在过滤器映射中，但是它仍在模型中但不会出现在UI事件中

我希望从价值中获得的金额能够保留并且不会被清算，但这是实际发生的情况：

输入金额和金额至，单击过滤器按钮，然后在框中输入值正确：

我删除了金额字段值，然后单击过滤器按钮，该按钮将其从过滤器中删除：

金额中的金额仍在模型中，但已从文本框中的金额中清除：