时间戳

首页 > 解决方案 > 如何在Angular 2中解析并将一个字段中的值填充到另一个字段中

javascript - 如何在Angular 2中解析并将一个字段中的值填充到另一个字段中

问题描述

我有一个带有两个输入字段的简单表单。我想从一个字段中获取文本并剪切第一部分并将其替换为其他文本并动态地将其填充到第二个字段中。我能够轻松地从现场获得部分，但我不确定如何在 keyup 上剪掉值。以下是代码： 组件 HTML

<div class="labels">Real Name</div> 
<div class="lbl">
     <input #realName type="text" [(ngModel)]="actualName" (keyup)="trigger()">
 </div>
 <div class="labels">Cyber Name</div>
 <div class="lbl">
     <input #cybName type="text"[(ngModel)]="cyberName"> 
  </div>

组件 TS

@ViewChild('realName') realName: ElementRef;
@ViewChild('cybName') cybName: ElementRef;

trigger() {
  this.cybName.nativeElement.value = this.realName.nativeElement.value;
}

在每次键入时，我都将 cybName 的值设置为 realName。但是，我想剪掉 realName 的前 4 个字符并将其替换为 droid 和 realName 的剩余字符，即，如果输入的真实姓名是“Alexys”，我想将其设为“droidys”。

我确信我不应该用 keyup 来做，但我不确定在这种情况下还能使用什么。任何人都可以帮我解决它。谢谢你。

标签： javascriptangulartypescript

解决方案

我认为一个简单的解决方案可以解决您的问题：

html中的变化：

<input #realName type="text" [ngModel]="actualName" (ngModelChange)="trigger($event)">

ts的变化：

trigger(newActualName) {
  this.actualName = newActualName;
  this.cyberName = `Droid${event.substring(4)}`;
}

当您更新模型 (actualName和cyberName) 时，它还将使用新值更新输入。

另外：Angular 警告不要ElementRef直接使用和访问 DOM。请参阅此处了解更多信息

推荐阅读