Angular中输入框与textarea无法设置默认值求助

我来帮你搞定这个Angular表单的问题～你遇到的核心问题是混淆了响应式表单的数据源绑定逻辑：用[value]直接给DOM元素赋值并不会同步到FormControl中，所以提交表单时this.edit_profile_form.value.fname才会返回空字符串。

正确的解决方式（响应式表单场景） #

因为你用到了FormGroup，属于响应式表单，应该通过FormControl来管理值，而不是直接操作DOM的value属性：

方法1：初始化FormGroup时直接设置默认值

在组件类中创建表单的时候，给对应的FormControl传入默认值：

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

@Component({
  // 组件元数据（比如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  edit_profile_form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单时直接设置fname和lname的默认值
    this.edit_profile_form = this.fb.group({
      fname: ['vignesh', Validators.required], // 第一个参数就是默认值
      lname: ['这里填lname的默认值', Validators.required]
    });
  }

  onSubmit() {
    console.log(this.edit_profile_form.value); // 现在就能取到正确的值了
  }
}

方法2：用patchValue/setValue动态赋值

如果默认值需要从接口获取或者动态设置，可以在ngOnInit或数据加载完成后调用：

ngOnInit(): void {
  this.edit_profile_form = this.fb.group({
    fname: ['', Validators.required],
    lname: ['', Validators.required]
  });

  // 动态设置默认值（比如从后端接口获取后）
  this.edit_profile_form.patchValue({
    fname: 'vignesh',
    lname: 'xxx'
  });

  // 如果需要严格匹配所有表单控件，也可以用setValue（必须传入所有控件的值）
  // this.edit_profile_form.setValue({
  //   fname: 'vignesh',
  //   lname: 'xxx'
  // });
}

HTML模板的正确写法 #

一定要移除[value]绑定，改用formControlName和FormGroup关联：

<form [formGroup]="edit_profile_form" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="fname" placeholder="First Name">
  <textarea formControlName="lname" placeholder="Last Name"></textarea>
  <button type="submit">提交</button>
</form>

为什么原来的方法不行？ #

在响应式表单中，FormControl是表单的唯一数据源，视图的显示值由FormControl驱动。你用[value]="vignesh"只是修改了DOM元素的显示内容，但并没有更新FormControl内部的value，所以提交表单时form.value自然取不到值。

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