Question

我使用Firebase的实时数据库在Angular 5中构建了一个应用程序。我的表单使用的是ngModel，并且有一个用户ID字段和一个自定义用户名字段。我需要用户名具有用户ID的默认值，除非用户选择更改它。

<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" />

当用户输入其用户ID时，虚拟身份字段会填充但不会将数据发送到数据库，除非他们在虚荣字段中添加或删除某些内容。

我尝试添加：

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

如果没有触摸任何一个字段，那么

到虚荣字段女巫会发送一个空字符串，但只有当用户ID被更改时才会发送任何内容。

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

Angular 5 ngModel基于表单输入设置默认值

1 个答案: