Угловая двухсторонняя привязка для имени пользователя и username_confirm

Question

У меня есть следующая проблема, я загружаю имя пользователя с сервера в качестве поля имени пользователя, я отображаю его в следующем виде:

<form class="form-horizontal form-material" #updateUserForm="ngForm" (ngSubmit)="updateUser(updateUserForm)" novalidate>
    <div class="form-group">
      <label class="col-md-12">Username: </label>
      <div class="col-md-12">
        <input name="username" type="text" #username="ngModel" [ngModel]="user.username"
          class="form-control form-control-line" required [disabled]="notEditMode" />
      </div>
    </div>
    <div class="form-group" *ngIf="!notEditMode">
      <label class="col-md-12">Confirm username: </label>
      <div class="col-md-12">
        <input name="confirm_username" type="text" #username_confirm="ngModel" [ngModel]="user.username"
          class="form-control form-control-line" required [disabled]="notEditMode" />
      <div class="alert alert-danger" *ngIf="updateUserForm.value.username !== updateUserForm.value.confirm_username">
          Username don't match.
      </div>
    </div>
  </div>
</form>

И теперь я хотел бы сделать имя пользователя и имя_пользователя Подтверждения вставлятьзначение имени пользователя с сервера, но когда я редактирую поле имени пользователя в форме, поле verify_username не должно быть связано на основе имени пользователя.

В общем, я хочу, чтобы пользователь заполнил поле verify_username тем же значением после изменения имени пользователя.

В настоящее время приведенный выше код работает таким образом, что при изменении значения имени пользователя,он также изменяется на verify_username, и я хочу, чтобы пользователь подтвердил само имя пользователя.

Answer 1

В настоящее время приведенный выше код работает таким образом, что, когда я изменяю значение имени пользователя, он также изменяется на имя_пользователя подтверждения

Конечно: вы привязываетесь к тому же полю.

Вам нужно иметь другое поле для подтвержденного поля.Если это не с сервера, просто добавьте локальное поле в свой компонент, скопируйте в него имя пользователя по умолчанию с сервера и привяжите к этому локальному полю.

Answer 2

Вы должны использовать разные имена ngModel, в приведенном выше коде вы использовали одно и то же имя ngModel для обоих полей ввода.

<input name="confirm_username" type="text" #username_confirm="ngModel" [ngModel]="user.confirmusername" class="form-control form-control-line"
                required [disabled]="notEditMode" />