Angular - 在输入字段中转换为小写答案

【问题标题】：Angular - convert to lowercase in an input fieldAngular - 在输入字段中转换为小写
【发布时间】：2018-12-18 14:31:09
【问题描述】：

我有一个电子邮件输入，我希望当我输入输入的大写字母时，它会将它们转换为小写字母

我试过这个方法，但它显示了一个错误

ERROR RangeError: 超出最大调用堆栈大小

<input type="text" formControlName="mail" (ngModelChange)="toLowerCase($event)">

private toLowerCase(event): void {
    this.cmOrganizationForm.get('mail').setValue(event.toLowerCase());
}

【问题讨论】：

标签： angular typescript

【解决方案1】：

当您使用响应式表单时，请不要使用ngModelChange 事件。

监听你的表单控件的valueChanges订阅并设置订阅下的值，emitEvent为false，这将不会再次发出valueChanges事件。

试试这个，这不会再次emitvalueChanges 事件

private ngOnInit(): {
  this.cmOrganizationForm.get('mail').valueChanges.subscribe((event) => {
     this.cmOrganizationForm.get('mail').setValue(event.toLowerCase(), {emitEvent: false});
  })
}

【讨论】：

【解决方案2】：

我们需要删除应该在模板驱动表单'ngModel'中使用的modelChange事件发射器。

模板：

<input type="text" formControlName="mail">

组件：

ngOnInit(){
  this.form.get('mail').valueChanges.subscribe(event => {
     this.form.get('mail').setValue(event.toLowerCase(), {emitEvent: false});
  });
}

StackBlitz：https://stackblitz.com/edit/angular-wp4tim?file=src%2Fapp%2Fapp.component.ts

【讨论】：

【解决方案3】：

你可以在没有事件的情况下实现你想要的：

在你的css中添加

input[type="text"] { text-transform: lowercase; }

在.ts 文件中使用this.cmOrganizationForm.get('mail').toLowerCase();

【讨论】：

【解决方案4】：

这个函数在 angular 6 中用于下划线和小写：

 underscore(selectkpi){
    this.selectedUnderKpi = selectkpi.replace(' ', '_').toLowerCase();
    var a = this.selectedUnderKpi
    console.log("ini = ",a);
  }

【讨论】：