编辑2

Question

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

我有用于电话号码的自定义输入字段（我正在使用反应式表单方法）。目的是始终在输入值前加一个加号。

要求：

包括加号在内的整个输入值应该是可以选择的（即，在输入之前添加span-s或div-s加号的黑客是不可接受的
如果输入值为空-可以删除加号，否则，如果我们加数字，则应在输入值的开头加上
不允许使用第三方库
使用新值（例如'123456'）修补表单控件时-还应在其前面添加加号

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

Answer 1

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

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)

编辑2

这里是更新的解决方案，即使通过<input (change)="processInput()"/>手动设置了输入，也可以与FormControl.registerOnChange一起处理输入。

角度组件：

patchValue

HTML模板：

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

Stackblitz, for reference.

Answer 2

我很快将一些东西放在一起，代码需要重构，但从本质上讲，它可以满足您的要求。您可以订阅formControl上的valueChanges事件，在这里您可以对产生所需结果所需的值进行所有修改。链接到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中的输入值之前添加加号“ +”

2 个答案:

编辑2