javascript - (ngModelChange) 删除最后一个符号 (Angular)

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>

以及我在此字段中显示的连接值

<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 : ''}`;
}

我的问题，最后一个字符已从名字或姓氏中删除

我怎样才能解决这个问题？

Answer 1

您的 ngModelChange 事件在模型实际更新之前触发，因此在更改之前触发事件时使用当前值。可能会做with the ordering of模板中的 (ngModelChange) 和 [(ngModel)]。

将您的事件更改为在(输入)上触发，它将获得最新的值。

<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