在 Angular2 中的输入值前添加加号“+”

Question

这个问题听起来很简单，但我可以找到任何明确的解决方案。

我有 phone 个数字的自定义输入字段（我使用的是反应式表单方法）。目的是在输入值前总是有一个加号。

要求：

包括加号在内的整个输入值应该是可选的（即，在输入前添加带加号的 span-s 或 div-s 的 hack 是不可接受的）
如果输入值为空 - 加号可以去掉，否则如果我们加数字就应该加在输入值的开头
不接受使用第三方库
使用新值（例如“123456”）修补表单控件时 - 它也应该在前面添加加号

我们如何在 Angular2 项目中实现这个逻辑？

Answer 1

这是一个可以绑定到 input 的 (change) 事件的函数：

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 手动设置的。

Angular 分量：

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, for reference.

Answer 2

我很快将一些东西放在一起，代码需要重构，但本质上它可以满足您的要求。您可以订阅 formControl 上的 valueChanges 事件，在这里您可以对产生所需结果所需的值进行所有修改。 Link 到 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' })
  }
}

在 Angular2 中的输入值前添加加号“+”

Add plus sign "+" before input value in Angular2

phone-number

input-field

angular

angular-reactive-forms

编辑 2