Angular 5中基于表单输入为ngModel设置默认值的实现方法

我来帮你搞定这个需求～要让用户名默认和用户ID保持一致，除非用户主动修改，咱们可以从模板和组件逻辑两部分入手：

1. 模板部分（HTML） #

先调整你的表单代码，给用户名输入框加上输入事件监听，同时给用户ID输入框添加同步逻辑的触发：

<!-- 用户ID输入框 -->
<label class="label-control" for="userId">User ID</label>
<input 
  id="userId" 
  type="text" 
  class="form-control" 
  required 
  minlength="1" 
  name="userId" 
  [(ngModel)]="userData.userId" 
  #userId="ngModel" 
  placeholder="e.g. johnhancock"
  (input)="syncUsernameIfNeeded()"
>

<!-- 用户名输入框 -->
<label class="label-control" for="username">User Name</label>
<input 
  id="username" 
  type="text" 
  class="form-control" 
  name="username" 
  [(ngModel)]="userData.username" 
  #username="ngModel"
  (input)="markUsernameAsCustomized()"
>

2. 组件逻辑部分（TypeScript） #

在你的组件类里，我们需要加一个标记位来判断用户是否已经自定义过用户名，再配合同步逻辑：

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
  selector: 'app-your-component', // 替换成你的组件选择器
  templateUrl: './your-component.component.html' // 替换成你的模板路径
})
export class YourComponent implements OnInit {
  // 存储用户数据的对象
  userData = {
    userId: '',
    username: ''
  };
  // 标记用户是否自定义过用户名
  private isUsernameCustomized = false;

  constructor(private db: AngularFireDatabase) {}

  ngOnInit() {
    // 如果是编辑现有用户（从Firebase加载了userId），初始化用户名
    if (this.userData.userId) {
      this.userData.username = this.userData.userId;
    }
  }

  // 同步用户名：只有当用户没自定义过时，才跟着userId变化
  syncUsernameIfNeeded() {
    if (!this.isUsernameCustomized) {
      this.userData.username = this.userData.userId;
    }
  }

  // 用户一旦修改用户名，标记为已自定义，不再同步
  markUsernameAsCustomized() {
    this.isUsernameCustomized = true;
  }

  // 保存数据到Firebase实时数据库的方法
  saveToFirebase() {
    // 这里假设你把用户数据存在users节点下，用userId作为唯一key
    this.db.object(`users/${this.userData.userId}`)
      .set(this.userData)
      .then(() => alert('数据保存成功！'))
      .catch(err => console.error('保存失败：', err));
  }
}

逻辑说明 #

• 初始化阶段：如果是编辑现有用户，从Firebase加载到userId后，直接把username设为userId；如果是新建用户，用户输入userId时，username会自动同步过去。
• 用户交互阶段：只要用户没手动修改过用户名，userId的变化会实时同步到username；一旦用户输入了自定义的用户名，后续userId再变化也不会覆盖username了。

如果你的需求是“只要当前用户名和userId相同，就允许同步”（比如用户改了又改回和userId一样的情况），可以把syncUsernameIfNeeded方法改成这样：

syncUsernameIfNeeded() {
  if (this.userData.username === this.userData.userId) {
    this.userData.username = this.userData.userId;
  }
}

这样的话，只要用户名和userId一致，userId变化时就会同步，更灵活一些～

内容的提问来源于stack exchange，提问作者bjwhip