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事件是在实际更新模型之前触发的，因此，在更改之前，事件触发时的当前值为。可以在模板中执行with the ordering of (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>

OR

更改模板中属性的顺序：

<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

（ngModelChange）删除最后一个符号（角度）

1 个答案: