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

У меня есть приложение, созданное в Angular 5 с использованием базы данных реального времени Firebase. Моя форма использует 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'}"

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


angular firebase-realtime-database forms ngmodel form-control
person bjwhip    schedule 28.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

компонент.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, чтобы убедиться, что печатается правильное значение.

компонент.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

person Luis Reinoso    schedule 28.04.2018