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>

现在我想使用户名和Confirm_username插入服务器中的用户名值，但是当我在表单中编辑用户名字段时，confirm_username字段不应基于用户名进行绑定。

通常，我希望用户在更改用户名后用相同的值来完成Confirm_username字段。

当前，上面的代码以一种方式工作，即当我更改用户名值时，它也更改为confirm_username，并且我希望用户确认用户名本身。

Answer 1

您应该使用不同的ngModel名称，在上面的代码中，两个输入字段都使用了相同的ngModel名称。

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

Answer 2

当前，上面的代码以一种方式工作，当我更改用户名值时，它也更改为Confirm_username

当然：您要绑定到同一字段。

已确认的字段需要另一个字段。如果不是来自服务器，则只需在组件中添加一个本地字段，将服务器的默认用户名复制到该组件中，然后绑定到该本地字段即可。

用户名和username_confirm的Angular 2way绑定

2 个答案: