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

Question

I have a simple form with two input fields. I would like to take the text from one field and snip the first part and replace it with some other text and populate it into the second field dynamically. I was able to achieve the getting part from the field with ease but I am not sure how to snip the value on keyup. The following is the code: Component 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>

Component TS

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

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

On every keyup, I am setting the value of the cybName with the realName. But, I would like to snip the first 4 characters of the realName and replace it with droid and the remaining characters of the realName ie, if the typed in real Name was "Alexys", I would like to make it "droidys".

I am sure I shouldn't be doing it with keyup but I am not sure what else to use for this situation. Could anyone help me with it. Thank you.

Answer 1

you can use the splice to cut up your input. I am also assuming the following use cases

"AAAAAA" -> "droidAA"

"AAAA" -> "droid"

"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;
}

Also, you shouldn't have to use nativeElement . You should be able to use the variables themselves.

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

Answer 2

I think you just want to append the substr:

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

Answer 3

An easy solution that I think will solve your issue:

Changes in html:

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

Changes in ts:

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

When you update the model ( actualName and cyberName ) it will also update the input with the new values.

Also: Angular warns against using the ElementRef and accessing the DOM directly. See here for more info

Answer 4

Try the following:

<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

As you can see by all the answers there are many ways to skin this Cat. If it were me, I would use a pipe to achieve this. As shown in this working example .

You can create a pipe like this:

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!`;
  }
}

... and then in your HTML use it like this:

<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>

Because really, you probably don't want people to be able to edit the generated droid name anyway - do you?