Question

我有一个带有两个输入字段的简单表格。我想从一个字段中获取文本并剪裁第一部分，并用其他文本替换它，然后将其动态填充到第二个字段中。我能够轻松地从现场获得帮助，但是我不确定如何在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;
}

在每次键入键时，我都使用realName设置cybName的值。但是，我想剪切realName的前4个字符，并用droid替换它，然后将realName的其余字符替换掉，即，如果实名中键入的是“ Alexys”，我想将其命名为“ droidys”。 / p>

我确定我不应该使用keyup来做到这一点，但是我不确定在这种情况下还有什么用。谁能帮助我。谢谢。

Answer 1

您可以使用接头剪切输入内容。我还假设以下用例

“ AAAAAA”->“ droidAA”

“ AAAA”->“机器人”

“ AA”->“ AA”

const strLength = this.realName.nativeElement.value && this.realName.nativeElement.value.toString().length;

if (strLength >= 4) {
    this.cybName.nativeElement.value = 'droid' + this.realName.nativeElement.value.toString().splice(4, strLength);
} else {
    this.cybName.nativeElement.value = this.realName.nativeElement.value;
}

此外，您不必使用nativeElement。您应该可以自己使用变量。

if (this.actualName && this.acutualName.length >= 4) {
    this.cyberName = 'droid' + this.actualName.splice(4, this.acutualName.length);
} else {
    this.cyberName = this.actualName;
}

Answer 2

我认为您只想添加substr：

let cyberName = 'droid';
let realName = 'Alexys';
let cyberDroidName = `${cyberName}${realName.substring(4)}`;
console.log(cyberDroidName);

Answer 3

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

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。有关更多信息，请参见here

Answer 4

尝试以下操作：

<div class="labels">Real Name</div> 
<div class="lbl">
     <input #realName type="text" [(ngModel)]="actualName">
 </div>
 <div class="labels">Cyber Name</div>
 <div class="lbl">
     <input #cybName type="text"[ngModel]="'droid' + actualName.substring(4)"> 
  </div>

Answer 5

您可以从所有答案中看到，有很多方法可以为这只Cat蒙皮。如果是我，我会使用pipe来实现。如working example所示。

您可以这样创建管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'robotNamePipe'})
export class RobotNamePipe implements PipeTransform {
  transform(value: number, exponent: string): string {

  // Run your logic in here

    return `${value} - Anyhting you want!`;
  }
}

...，然后在您的HTML中像这样使用它：

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

<p>Robot name: {{realName.value | robotNamePipe}}</p>

实际上，您可能根本不希望人们能够编辑生成的机器人名称-是吗？

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

5 个答案: