Angular 5 ngModel根据表单输入设置默认值

Question

我在 Angular 5 中使用 Firebase 的实时数据库构建了一个应用程序。我的表单使用 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 时，个性化 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根据表单输入设置默认值

Angular 5 ngModel setting default value based on form input

forms

form-control

firebase-realtime-database

ngmodel

angular