Question

我有一封电子邮件输入，我想在输入的大写字母中将其转换为小写字母

我尝试了这种方法，但显示出了错误

错误RangeError：超出了最大调用堆栈大小

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

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

Answer 1

在使用反应式表单时，请不要使用ngModelChange事件。

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

尝试一下，这不会再次emit valueChanges事件

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

Answer 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

Answer 3

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

在您的CSS中添加

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

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

Answer 4

下划线和小写的角度6中的此函数：

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

角度-在输入字段中转换为小写

4 个答案: