Angular 用于角度4输入的上套管

我想使用大写管道作为输入框，而不使用ngModel，而且我正在使用FormBuilder。任何将表单的所有值转换为大写的方法

添加

您只需设置控件的值，而无需发出更改事件。在表单的每个值上循环可以这样做：

this.form.valueChanges.do（值=>{
Object.keys（values）.forEach（k=>{
this.form.get（k）.setValue（value.toUpperCase（），{emitteevent:false}）；
});
}).subscribe（）；

---

您还可以并将处理转换。

解决方案。您可以按如下方式使用输入

(input)="orderForm.patchValue({name: $event.target.value.toUpperCase()})"

---

我正在使用装饰器标记属性的大小写类型，当标记为“upper”或“lower”的属性之一的值更改，并且新值的大小写类型不正确时，我会更改大小写，然后将光标移动到正确的位置，因为更改FormControl的值会将光标放在值的末尾

这适用于键入、删除或粘贴文本，无论位置或大小写类型如何

也许可以将其转换为一个指令，将输入的case类型传递给该指令，以获得更优雅的解决方案

下面的代码将检查绑定到标记为“upper”或“lower”的属性的每个FormControl：

import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
import { takeUntil, filter } from 'rxjs/operators';
----
constructor(private _renderer2: Renderer2){}

ngOnInit() {
  this.getProperties(this.entity)
    .filter(prop => new Array<string>('upper', 'lower')
      .includes(this.getPropertyCaseType(this.entity, prop)))
    .forEach(prop => {
      this.form.controls[prop].valueChanges
        .pipe(filter(v => {
          if (!v) return false;
          let caseType = this.getPropertyCaseType(this.entity, prop);
          if (caseType === 'upper') return v !== (<string>v).toUpperCase();
          if (caseType === 'lower') return v !== (<string>v).toLowerCase();
          return false;
        }))
        .subscribe(t => {
          let oldVal = this.form.value[prop];
          let currentVal = <string>t;

          this.form.controls[prop].setValue(this.getPropertyCaseType(this.entity, prop) === 'upper' ?
          currentVal.toUpperCase() :
          currentVal.toLowerCase());

          let inputElement = this._renderer2.selectRootElement(`#input_${prop}`);
          if (!inputElement || !oldVal) return;

          let diff: string = '';
          for (let i = 0; i < currentVal.length; i++)
            if (currentVal[i] !== oldVal[i - diff.length]) 
              diff = `${diff}${currentVal[i]}`;

          let diffPosition = currentVal.lastIndexOf(diff);
          inputElement.setSelectionRange(diffPosition + diff.length, diffPosition + diff.length);
      });
    });
}

从'@angular/core'导入{Component，OnInit，OnDestroy，Renderer2}；
从“rxjs/operators”导入{takeUntil，filter}；
----
构造函数（私有_render2:render2）{}
恩戈尼尼特（）{
this.getProperties（this.entity）
.filter（prop=>新数组（'upper'，'lower'））
.includes（this.getPropertyCaseType（this.entity，prop）））
.forEach（prop=>{
this.form.controls[prop].valueChanges
.管道（过滤器（v=>{
如果（！v）返回false；
让caseType=this.getPropertyCaseType（this.entity，prop）；
if（caseType=='upper'）返回v！==（v）.toUpperCase（）；
if（caseType=='lower'）返回v！==（v）.toLowerCase（）；
返回false；
}))
.订阅（t=>{
让oldVal=this.form.value[prop]；
设currentVal=t；
this.form.controls[prop].setValue（this.getPropertyCaseType（this.entity，prop）=='upper'？
currentVal.toUpperCase（）：
currentVal.toLowerCase（））；
让inputElement=this.\u renderer2.选择RootElement（`input.${prop}`）；
如果（！inputElement | |！oldVal）返回；
让diff:string=''；
for（设i=0；i

此解决方案将光标移动到末尾。