Angular 响应式表单 - 提交时将电子邮件地址转换为小写

Question

在我的反应式表单中，我允许用户输入电子邮件地址，其中“@”之前的文本可以包含大写字符。但是我想将 'DAve@gmail.com' （有效）转换为 'dave@gmail.com' onSubmit.

我尝试创建一个单独的函数，在 onSubmit 中将输入转换为小写，尝试在 getter 上调用 toLowerCase()，并在 FormBuilder 中调用 toLowerCase()，但是它们都会导致错误或表格无效。

我确定这很简单，但我有点卡住了...

FORMBUILDER

this.firstFormGroup = this._formBuilder.group({
    email: [this.user.email, [Validators.required, Validators.email, Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]]
});

GETTER

get email() {
        return this.firstFormGroup.get('email');
    }

提交

this.user.lastName = this.firstFormGroup.controls['email'].value;

Answer 1

您应该在表单控件的值中使用 toLowerCase() 作为

this.user.lastName = this.firstFormGroup.controls['email'].value.toLowerCase();

Answer 2

如果您想在输入时进行转换，可以使用 (input)

<input (input)="loginForm.controls.userName.setValue(loginForm.controls.userName.value.toLowerCase())"
          formControlName="userName" id="userName">

Angular 响应式表单 - 提交时将电子邮件地址转换为小写

Angular Reactive Form - convert email address to lowercase on submit

lowercase

email-validation

angular

angular-reactive-forms