1

我们有一个支持两种语言（英语、阿拉伯语）的应用程序，在注册表中我们需要支持这两种语言。但仅对于电子邮件字段，我们需要显示错误消息使用英语输入电子邮件字段。我怎样才能做到这一点？任何解决方案都会对我们有帮助。谢谢你。

<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>

当用户在电子邮件字段中使用阿拉伯语时，如何显示错误消息仅使用英语作为电子邮件。

4

1 回答 1

1

这是一个使用自定义翻译管道的角度多语言应用程序的简单示例。使用这种方法。

您可以在语言文件中定义错误消息、段落、文本。这里 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 中的示例。

于 2019-10-21T10:42:30.397 回答