(ngModelChange) delete last symbol (Angular)

Question

I have 2 inputs where I enter value and concat it into new one

Here is code from HTML

<div class="form-group">
                    <label>{{l("FirstName")}}</label>
                    <input #firstNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()"  [(ngModel)]="landlord.firstName"  required maxlength="32">
                    <validation-messages [formCtrl]="firstNameInput"></validation-messages>
                </div>
                <div class="form-group">
                    <label>{{l("LastName")}}</label>
                    <input #lastNameInput="ngModel" class="form-control" type="text" name="name" (ngModelChange)="onNameChange()" [(ngModel)]="landlord.lastName"  required maxlength="32">
                    <validation-messages [formCtrl]="lastNameInput"></validation-messages>
                </div>

And concat value I show in this field

<div class="form-group">
                    <label>{{l("OrganizationName")}}</label>
                    <input #organizationName="ngModel" class="form-control" type="text" name="organizationName" [(ngModel)]="landlord.organizationName" required maxlength="500">
                    <validation-messages [formCtrl]="organizationName"></validation-messages>
                </div>

Here is code from ts file

onNameChange() {
    this.landlord.organizationName = `${
        this.landlord.firstName ? this.landlord.firstName : ''
    } ${this.landlord.lastName ? this.landlord.lastName : ''}`;
}

My problem, that last character is deleted from firstName or lastName

How I can fux this stuff?

Answer 1

Your ngModelChange event is firing before the model is actually updated, so with the current value at the time the event is fired , prior to the change. Likely to do with the ordering of (ngModelChange) and [(ngModel)] in your template.

Change your event to fire on (input) and it will get the most recent value.

<div class="form-group">
    <label>{{l("FirstName")}}</label>
    <input #firstNameInput="ngModel" class="form-control" type="text" name="name" (input)="onNameChange($event)"  [(ngModel)]="landlord.firstName"  required maxlength="32">
</div>

OR

Change the order of your attributes in your template:

<div class="form-group">
    <label>{{l("FirstName")}}</label>
    <input #firstNameInput="ngModel" class="form-control" type="text" name="name" [(ngModel)]="landlord.firstName" (ngModelChange)="onNameChange()"   required maxlength="32">
</div>

Stackblitz: https://stackblitz.com/edit/angular-p7ecgh