（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