forms - 如何在使用非英语语言(如阿拉伯语)输入电子邮件输入字段时显示自定义错误消息
问题描述
我们有一个支持两种语言(英语、阿拉伯语)的应用程序,在注册表中我们需要支持这两种语言。但仅对于电子邮件字段,我们需要显示错误消息使用英语输入电子邮件字段。我怎样才能做到这一点?任何解决方案都会对我们有帮助。谢谢你。
<form name="enrollmentform" #enrollmentform="ngForm" novalidate>
<div class='field-container'>
<input type="text" value="" size="25" maxlength="30" placeholder="fullname" [dir]="direction" name="fullname" required #first_name="ngModel" class="floating-input"/>
<div *ngIf="enrollmentform.submitted && full_name.invalid" class="error">
<div class="error-message" *ngIf="first_name.errors.required">{{'First Name is required' | translate}}</div>
</div>
</div>
<div class='field-container'>
<input [dir]="direction" type="text" value="" placeholder="email" name="email" autocomplete="off" [pattern]="emailPattern" required #email="ngModel" />
<div class="error" *ngIf="(email.invalid) && (enrollmentform.submitted || email.dirty || email.touched)">
<div class="error-message" *ngIf="email.errors.required">{{'Email_is_required' | translate}}</div>
<div class="error-message" *ngIf="email.errors.pattern">{{'Please_enter_a_valid_email' | translate}}</div>
</div>
</div>
</form>
当用户在电子邮件字段中使用阿拉伯语时,如何显示错误消息仅使用英语作为电子邮件。
解决方案
这是一个使用自定义翻译管道的角度多语言应用程序的简单示例。使用这种方法。
您可以在语言文件中定义错误消息、段落、文本。这里 assets/languageFiles/en.json
{
"TITLE": "My i18n Application (en)"
}
资产/语言文件/en.json
{
"TITLE": "My i18n Application (ua)"
}
翻译服务
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class TranslateService {
data: any = {};
constructor(private http: HttpClient) { }
use(lang: string): Promise<{}> {
return new Promise<{}>((resolve, reject) => {
const langPath = `assets/languageFiles/${lang || 'en'}.json`;
this.http.get<{}>(langPath).subscribe(
translation => {
this.data = Object.assign({}, translation || {});
resolve(this.data);
},
error => {
this.data = {};
resolve(this.data);
}
);
});
}
}
平移管道
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from './translate.service';
@Pipe({
name: 'translate',
pure:false
})
export class TranslatePipe implements PipeTransform {
constructor(private translate: TranslateService) {}
transform(key: any): any {
return this.translate.data[key] || key;
}
}
在您的html文件中使用翻译文件以这种方式使用
<h1>
Welcome to {{ 'TITLE' | translate }}!
</h1>
而且您也可以更改语言。
请参考 stackblitz 中的示例。
推荐阅读
- java - 是否可以通过反射动态创建一个类?
- jenkins - 在 Jenkins 作业构建期间自动从 ELB 注册/注销 EC2 实例
- visual-c++ - 我正在尝试制作一个循环以在 cairo 中绘制多条线,但它在第一次迭代后停止绘制
- macos - Visual Studio 2019 For MAC OS 缺少一些库?
- r - 在 data.frame 中查找组之间的时间滞后
- arangodb - 在 ArangoDB 3.4.5 for Windows 中无法识别 PRUNE 命令
- c# - how to transform array of c# primitive type assigned to Object into something I can iterate through?
- php - 处理 Apache 服务器上包含 SQLite 数据库的文件夹的访问权限
- browser - 无法在微信 App 上打开我的 github 页面(Android、iOS 都有)
- ruby-on-rails - 使用 Ruby on Rails form_for 和控制器/方法绑定 PayPal 智能按钮?