Concat 2 input values and bind result to input

Question

I have 2 input values Here is how it look like

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

And I need to concat those values into one value and bind to this input

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

How I can do this?

How is it supposed to work when you edit totalSize? Should it modify roomLength or roomWidth? — Martin Parenteau
– Martin Parenteau, Commented Apr 11, 2019 at 18:02
Nope. It should not update, this field will be readonly @ConnorsFan — Eugene Sukh
– Eugene Sukh, Commented Apr 11, 2019 at 18:05
And what is the mathematical relationship between the three values? — Martin Parenteau
– Martin Parenteau, Commented Apr 11, 2019 at 18:08
You could use one-way binding: [ngModel]="room.roomLength * room.roomWidth". — Martin Parenteau
– Martin Parenteau, Commented Apr 11, 2019 at 18:17

gaurav soni · Accepted Answer · 2019-04-11 18:29:43Z

1

You can listen for ngModelChange event on both inputs(room.roomLength and room.roomWidth) and update the room.totalSize on eventHandler of that.

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

In your component.ts file,

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

edited Apr 11, 2019 at 18:29

answered Apr 11, 2019 at 18:01

gaurav soni

2061 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eugene Sukh Over a year ago

It helps. Thank's

gaurav soni Over a year ago

Glad to help you.

Collectives™ on Stack Overflow

Concat 2 input values and bind result to input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related