Angular中如何将一个字段的值同步填充到另一个字段？

根据你使用的表单类型，可选择对应实现方式：

1. 响应式表单实现（你提供的示例项目使用的是该类型） #

组件类（.ts文件）逻辑 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，userName默认设为禁用状态
    this.userForm = this.fb.group({
      fullName: ['', Validators.required],
      userName: [{value: '', disabled: true}]
    });

    // 监听fullName值变化，同步赋值给userName
    this.userForm.get('fullName').valueChanges.subscribe(inputVal => {
      this.userForm.get('userName').setValue(inputVal || '');
    });
  }
}

模板（.html文件）逻辑 #

<form [formGroup]="userForm">
  <div class="form-group">
    <label>FullName</label>
    <input type="text" formControlName="fullName" class="form-control">
  </div>
  <div class="form-group">
    <label>UserName（只读）</label>
    <input type="text" formControlName="userName" class="form-control">
  </div>
</form>

注意：禁用状态的控件默认不会出现在表单的value属性中，若提交时需要获取userName的值，调用this.userForm.getRawValue()即可获取包含禁用控件的完整表单数据。

2. 模板驱动表单实现 #

组件类（.ts文件）逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  fullName: string = '';
  userName: string = '';
}

模板（.html文件）逻辑 #

<div class="form-group">
  <label>FullName</label>
  <input type="text" [(ngModel)]="fullName" (input)="userName = fullName" class="form-control" name="fullName">
</div>
<div class="form-group">
  <label>UserName（只读）</label>
  <input type="text" [(ngModel)]="userName" readonly class="form-control" name="userName">
</div>

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