在 Angular 响应式表单中，如果我们希望表单控件显示预期的值，我们需要将这些值分别绑定到每个表单控件中。对于表单控件，我们可以使用FormControl、FormGroup和FormArray等类进行处理。以下是一个示例代码来演示如何在 Angular 响应式表单中显示预期值。我们将使用 FormBuilder 来创建一个 FormGroup，其中包含一个 FormControl 名称为 name。

1、在组件中定义属性和方法：

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

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

constructor(private fb: FormBuilder){}

ngOnInit(){ this.myForm = this.fb.group({ name: ['John'] }); }

onSubmit(){ console.log(this.myForm.value); } }

2、在 HTML 模板中添加表单：

这样就能在表单中显示预期的值了。我们通过在 FormGroup 中设置 FormControl 的默认值来实现。在这个示例中，我们创建了一个名为name的FormControl，并将其初始值设置为“John”。在 HTML 中，我们使用 formControlName 属性将其绑定到输入框中。

如果你需要在表单控件中显示来自服务端的数据，你可以通过在获取数据后，动态更新 FormGroup 中的 FormControl 来实现。