（ngModelChange）刪除最后一個符號（角度）

Question

我有2個輸入，在其中輸入值並將其合並為新值

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

我在此字段中顯示的concat值

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

這是ts文件中的代碼

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

我的問題是，從firstName或lastName中刪除了最后一個字符

我該如何處理這些東西？

Answer 1

您的ngModelChange事件會在實際更新模型之前觸發，因此更改之前會觸發事件時使用當前值。 可能與模板中 (ngModelChange)和[(ngModel)] 的順序有關 。

將您的事件更改為觸發(input) ，它將獲取最新的值。

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

要么

更改模板中屬性的順序：

<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