Angular 5 ngModel устанавливает значение по умолчанию на основе ввода формы

Question

У меня есть приложение, встроенное в Angular 5, использующее базу данных Firebase Real Time. Моя форма использует ngModel и имеет поле идентификатора пользователя и настраиваемое поле имени пользователя. Мне нужно, чтобы имя пользователя имело значение по умолчанию для идентификатора пользователя, если только пользователь не решит его изменить.

<label class="label-control" for="idInput">User Name</label>
<input id="userId" type="text" for="idInput" class="form-control"
       required minlength="1" name="userId"
       [(ngModel)]="userData.userId"
       #userId="ngModel"
       placeholder="e.g. johnhancock1776"
       />

<label class="label-control" for="vanityInput">Your Custom URL</label>
<input id="vanityId" type="text"
       for="vanityInput" 
       class="form-control"
       name="vanityId"
       [(ngModel)]="userData.vanityId"
       value="{{userData.userId}}"
       #vanityId="ngModel"
       placeholder="custom url" />

Когда пользователь вводит свой идентификатор пользователя, поле идентификатора тщеславия заполняется, но не отправляет данные в базу данных, пока не добавит или не удалит что-то из поля тщеславия.

Я попытался добавить:

       [ngModelOptions]="{updateOn: 'submit'}"

в поле тщеславия, которое позволяет отправлять пустую строку, если ни одно из полей не было затронуто, но не отправляет ничего, когда изменяется только идентификатор пользователя.

Answer 1

Вы можете использовать событие (ngModelChange) для изменения значения userData.vanityId вместо value="{{userData.userId}}", поскольку вы изменяете только представление, а не значение userData.vanityId.

component.html

<label class="label-control" for="idInput">User Name</label>
<input id="userId" type="text" for="idInput" class="form-control"
       required minlength="1" name="userId"
       [(ngModel)]="userData.userId"
       #userId="ngModel"
       placeholder="e.g. johnhancock1776"
       (ngModelChange)="changeVanityId($event)"
       />
<br>
<label class="label-control" for="vanityInput">Your Custom URL</label>
<input id="vanityId" type="text"
       for="vanityInput" 
       class="form-control"
       name="vanityId"
       [(ngModel)]="userData.vanityId"
       #vanityId="ngModel"
       placeholder="custom url" />

<button (click)="sendBackend()">Send</button>

Я добавил кнопку для печати значения userData, чтобы проверить правильность печати значения.

component.ts

  /**
   * Print in console
   */
  sendBackend() {
    console.log(this.userData);
  } 

  /**
   * Change value of vanityId
   */
  changeVanityId(event) {
    this.userData.vanityId = event
  }

Я реализую это здесь: https://stackblitz.com/edit/angular-sadk7e