Angular 6 i18n локализует значение FormField по умолчанию - PullRequest
0 голосов
/ 16 октября 2018

В моем приложении 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;
    //    ...
}

Есть ли способ установитьинтернационализированное значение по умолчанию для поля ввода?

Большое спасибо заранее!

С уважением

Настройка

1 Ответ

0 голосов
/ 17 октября 2018

Хорошо, теперь я достиг этого, изменив поле ввода следующим образом:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...