Добавьте знак плюс "+" перед входным значением в Angular2 - PullRequest
Новая
       42

Добавьте знак плюс "+" перед входным значением в Angular2

0 голосов
/ 29 августа 2018

Вопрос звучит довольно просто, но я мог бы найти какое-то ясное решение для него.

У меня есть пользовательское поле ввода (я использую подход реактивных форм) для телефонных номеров. Цель состоит в том, чтобы всегда иметь знак плюс перед входным значением.

Требования:

  • все входное значение, включая знак плюс, должно быть выбрано (то есть взлом с добавлением span-s или div-s со знаком плюс перед вводом недопустим)
  • если входное значение пусто - знак плюс можно убрать, в противном случае его следует добавить в начало входного значения, если мы добавим числа
  • использование сторонних библиотек недопустимо
  • при исправлении элемента управления формы с новым значением (например, «123456») - также следует добавить знак плюс перед

Как мы можем реализовать эту логику в проекте Angular2?

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Я быстро что-то собрал, код нуждается в рефакторинге, но по сути он делает то, что вы просили. Вы можете подписаться на событие valueChanges в formControl, здесь вы можете внести все изменения в значение, необходимое для получения желаемого результата. Ссылка на Stackblitz: https://stackblitz.com/edit/angular-9mubgr

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';
  myForm: FormGroup;
  constructor() {
    this.myForm = new FormGroup({
      'myInput': new FormControl('')
    })
  }


  ngOnInit() {
    this.myForm.get('myInput').valueChanges.subscribe((inputValue) => {
      if(inputValue === this.myForm.get('myInput')) {
        return;
      }

      if(inputValue.length === 0) {
        return;
      }

      if(inputValue.legth !== 0 && inputValue.slice(0,1) !== '+') {
        this.myForm.get('myInput').setValue('+' + this.myForm.get('myInput').value);
      }
    });
  }

  patch() {
    this.myForm.patchValue({ 'myInput': '123' })
  }
}
0 голосов
/ 29 августа 2018

Вот функция, которую вы можете привязать к событию (change) вашего input: 

processInput(inputVal: string = null) {
    if (!inputVal) {
        inputVal = this.myForm.get('myInput').value; // since you're using reactive forms
    }

    if (inputVal === '') {
        // Do nothing
    } else if (inputVal.match(/^\d*$/)) {
        if (!inputVal.includes('+')) {
            inputVal = '+' + inputVal;
        }
    }

    // Then patch your 'myInput' value in your form with 'inputVal'
    this.myForm.patchValue({ 'myInput': inputVal });
}

safePatchMyInput(value: string) {
    this.processInput(value);
}

Эта реализация добавит знак плюс, если (и только если) входная строка содержит только цифры. Это также позволяет полностью очистить ввод (включая знак плюс).

Редактировать: Добавление метода safePatchMyInput позволит вам вручную пропатчить этот вход и по-прежнему использовать ту же обработку ввода из предыдущей функции. (Это означает добавление параметра по умолчанию к предыдущей функции)

Привязка к событию (change) на вашем входе выглядит просто так: 

<input (change)="processInput()"/>

Редактировать 2

Это обновленное решение, которое работает с FormControl.registerOnChange для обработки ввода, даже если оно было установлено вручную с помощью patchValue.

Угловой компонент: 

myForm: FormGroup;

constructor() {
  this.myForm = new FormGroup({
    'myInput': new FormControl('')
  })
}

ngOnInit() {
  const myInput = this.myForm.get('myInput') as FormControl;
  myInput.registerOnChange(this.processInput);
}

processInput = () => {
  let inputVal = this.myForm.get('myInput').value;

  if (inputVal === '') {
    // Do nothing
  } else if (inputVal.match(/^\d*$/)) {
    if (!inputVal.includes('+')) {
      inputVal = '+' + inputVal;

      // Then patch your 'myInput' value in your form with 'inputVal'
      this.myForm.patchValue({ 'myInput': inputVal });
    }
  }
}

HTML-шаблон: 

<form [formGroup]="myForm">
    <input formControlName="myInput" (input)="processInput()"/>
</form>

Stackblitz, для справки.

...