javascript - 连接 2 个输入值并将结果绑定(bind)到输入

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>

我需要将这些值连接成一个值并绑定(bind)到此输入

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