Angular 6 i18n 本地化表单字段输入默认值

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 发布。