Angular 6 i18n 本地化 FormField 输入默认值答案

【问题标题】：Angular 6 i18n localize FormField Input default valueAngular 6 i18n 本地化 FormField 输入默认值
【发布时间】：2018-10-16 16:54:30
【问题描述】：

在我的 Angular 6 应用程序中，我想用国际化的默认值预填充一个输入字段（使用新的 Angular 6 国际化功能）。

将i18n-value="inputFieldDefaultValueForTeamName" 与value="###{{displayName}}'s Team###" 一起使用无效，并将值留空。不过，它确实适用于占位符。

我的设置如下：

<form (ngSubmit)="onCreateTeam(f)" #f="ngForm">
  <div class="form-group">
    <label for="teamName" i18n="teamNameLabel">###TeamName###</label>
    <input type="text" id="teamName" name="teamName" 
         i18n-placeholder="inputfieldPlaceholderForTeamName"
         placeholder="###{{displayName}}'s Team###"

         i18n-value="inputFieldDefaultValueForTeamName"
         value="###{{displayName}}'s Team###"

         ngModel
         minlength="2" maxlength="100" required>
  </div>
  <button type="submit" i18n="createTeamButton">###Create Team###</button>

</form>

在我的组件中：

onCreateTeam(form: NgForm) {   
    //    ...
    const teamName = form.value.teamName;
    //    ...
}

有没有办法设置输入字段的国际化默认值？

非常感谢！

亲切的问候

设置

【问题讨论】：

标签： angular localization internationalization angular6

【解决方案1】：

好的，现在我通过以下方式更改输入字段来实现它：

 <input type="text" id="teamName" name="teamName"
         i18n-placeholder="inputfieldPlaceholderForTeamName"
         placeholder="###{{displayName}}'s Team###"
         #teamNameInput
         [(ngModel)]="teamName"
         minlength="2" maxlength="100" required>

然后在代码中：

teamName = '';
//If you have an ngIf wrapper, the setter will be called with undefined, and then 
again with a reference once ngIf allows it to render.
@ViewChild('teamNameInput') set defaultTeamName(input: ElementRef) {
  if (!!input) {
    // needs to be wrapped in a 0 timeout to prevent ExpressionChangedAfterItHasBeenCheckedError (following https://angular.io/api/core/ViewChild Line 23)
    setTimeout(() => {
      //set the localized placeholder as the input fields value
      this.teamName = input.nativeElement.placeholder;
    }, 0);
  }
}

感觉像是一个 hack，但我想这是在 Angular v7 发布之前直接在代码中访问本地化值的唯一方法。

【讨论】：