Dynamic formatting user input in Angular 2

Question

Task: to make dynamic formatting user input for credit cards in Angular 2.

The problem is that when I was deleting a space between the figures, it is removed and does not appear in the input back, although values in deriving the console correct

My component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
values: any = "";
input_text: string = "10";
tmp: string[] = [];
val: string;

creditCard(event: any) {

if ((/^3[47]\d{0,13}/).test(event.target.value)) {
  this.values = "";
  this.input_text = this.creditCardType.amex.text_length;
  this.val = event.target.value;
  this.val = this.val.replace(/[\W\s\._\-]+/g, '');
  let chunk = [];
  let split = 4;
  for (var i = 0, len = this.val.length; i < len; i += split) {
    split = ( i >= 4 && i <= 10 ) ? 6 : 4;
    chunk.push( this.val.substr( i, split ) );
  }
  this.values = chunk.join(" ");
  console.log(this.values); //after deleting in console: 3456 598756 58745
                            //on input: 3456 59875658745

 }
 }
 }

app.component.html

<md-input-container>
 <input mdInput placeholder="creditCard" (keyup)="creditCard($event)"[value]=values [attr.maxlength]=input_text numbers>
  </md-input-container>

<p>{{values}}</p>

I need that space can not be removed or after removing it displays back on the input.

aRise · Accepted Answer · 2017-06-06 15:53:05Z

1

Instead of [value]=values try [(ngModel)]='values'

<md-input-container> <input mdInput placeholder="creditCard"     (keyup)="creditCard($event)" [(ngModel)]='values' [attr.maxlength]=input_text numbers>
  </md-input-container>

[] -> is one-way data binding [()] -> is two-way data binding

answered Jun 6, 2017 at 15:53

aRise

1399 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aRise Over a year ago

Thank you for confirming :-)

Collectives™ on Stack Overflow

Dynamic formatting user input in Angular 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related