Question

我有2个输入值看起来是这样

<div class="form-group">
                    <label>{{l("RoomLength")}}</label>
                    <input number-directive #roomLengthInput="ngModel" class="form-control nospinner-input" type="text" name="roomLength" [(ngModel)]="room.roomLength"   maxlength="32">
                </div>
                <div class="form-group">
                    <label>{{l("RoomWidth")}}</label>
                    <input number-directive #roomWidthInput="ngModel" class="form-control nospinner-input" type="text" name="roomWidth" [(ngModel)]="room.roomWidth"   maxlength="32">
                </div>

我需要将这些值合并为一个值并绑定到此输入

<div class="form-group">
                    <label>{{l("TotalSize")}}</label>
                    <input number-directive #totalSizeInput="ngModel" class="form-control nospinner-input" type="text" name="totalSize" [(ngModel)]="room.totalSize"   maxlength="32">
                </div>

我该怎么做？

Answer 1

您可以在两个输入（room.roomLength和room.roomWidth）上监听 ngModelChange 事件，并在其eventHandler上更新room.totalSize。

<div class="form-group">
                    <label>{{l("RoomLength")}}</label>
                    <input number-directive #roomLengthInput="ngModel" class="form-control nospinner-input" type="text" name="roomLength" [(ngModel)]="room.roomLength" (ngModelChange)="updateSize()"   maxlength="32">
                </div>
                <div class="form-group">
                    <label>{{l("RoomWidth")}}</label>
                    <input number-directive #roomWidthInput="ngModel" class="form-control nospinner-input" type="text" name="roomWidth" [(ngModel)]="room.roomWidth" (ngModelChange)="updateSize()"   maxlength="32">
                </div>

在您的component.ts文件中，

updateSize() {
   this.totalSize = this.room.roomWidth + this.room.roomLength
}

Concat 2输入值并将结果绑定到输入

1 个答案: