Question

在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;
    //    ...
}

有什么方法可以设置输入字段的国际化默认值？

非常感谢！

亲切的问候

设置

Answer 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);
  }
}

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

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

1 个答案: