[英](ngModelChange) delete last symbol (Angular)
I have 2 inputs where I enter value and concat it into new one 我有2个输入,在其中输入值并将其合并为新值
Here is code from HTML 这是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 我在此字段中显示的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>
Here is code from ts file 这是ts文件中的代码
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 我的问题是,从firstName或lastName中删除了最后一个字符
How I can fux this stuff? 我该如何处理这些东西?
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. 您的
ngModelChange
事件会在实际更新模型之前触发,因此更改之前会触发事件时使用当前值。 Likely to do with the ordering of (ngModelChange)
and [(ngModel)]
in your template. 可能与模板中
(ngModelChange)
和[(ngModel)]
的顺序有关 。
Change your event to fire on (input)
and it will get the most recent value. 将您的事件更改为触发
(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 要么
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 Stackblitz: https ://stackblitz.com/edit/angular-p7ecgh
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.