Javascript Concat 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>

{{l（“RoomLength”）}
{{l（“房间宽度”）}

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

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

{{l（“TotalSize”）}

---

如何做到这一点？

您可以在两个输入（room.roomLength和room.roomWidth）上侦听ngModelChange事件，并在该事件处理程序上更新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>

---

当您编辑

totalSize

时，它应该如何工作？它应该修改

roomLength

还是

roomWidth

？否。它不应该更新，该字段将是只读的@connorsfan，这三个值之间的数学关系是什么？total=length*width@connorsfan您可以使用单向绑定：

[ngModel]=“room.roomLength*room.roomWidth”

。这很有帮助。谢谢你的帮助。

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