Angular表单绑定formControlName后默认值不显示、校验异常问题

Angular响应式表单的核心机制是：表单状态完全由组件类中的FormGroup/FormControl实例接管，一旦给输入控件绑定了formControlName，原生value属性的插值绑定会完全失效；同时如果控件没有正确添加formControlName绑定，用户输入的内容也不会同步到表单实例，所有校验规则、值读取都不会生效。
你遇到的两个异常对应原因如下：

• 默认值不显示：初始化FormControl时统一传入了空字符串作为初始值，没有把products对象的字段值赋值给对应控件，加了formControlName后表单读取的是FormControl的空值，自然不会显示你用value插值绑定的产品字段值。
• 校验不触发、提交无成功提示：现有HTML代码中三个输入控件都没有添加formControlName属性，用户输入的内容完全不会同步到FormGroup实例中，FormControl里始终存的是初始化的空值，校验状态永远为无效，自然不会触发对应提示，也不可能走到校验通过的成功弹窗逻辑。

1. 修改TypeScript逻辑，正确设置表单默认值 #

初始化表单时直接把产品字段作为控件初始值，如果产品数据是异步获取的，拿到数据后调用patchValue同步更新表单值即可：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { CartService } from '../cart.service';
import { FavService } from '../fav.service';
import { products } from '../models/products';
import { ProductsService } from '../products.service';

@Component({
  selector: 'app-update-delete-product',
  templateUrl: './update-delete-product.component.html',
  styleUrls: ['./update-delete-product.component.css']
})
export class UpdateDeleteProductComponent implements OnInit {
  updateProductForm!: FormGroup;
  isSubmitted = false;
  products!: products;
  constructor(private activatedRoute: ActivatedRoute, private productService: ProductsService,
    private cartService: CartService, private router: Router, private formbuilder: FormBuilder) {
    activatedRoute.params.subscribe((params) => {
      if (params.id) {
        this.products = productService.getProductsById(params.id)
        // 异步拿到产品数据后更新表单值
        if (this.updateProductForm) {
          this.updateProductForm.patchValue({
            pname: this.products.name,
            price: this.products.price,
            description: this.products.description
          })
        }
      }
    })
  }

  ngOnInit(): void {
    this.updateProductForm = this.formbuilder.group({
      // 初始化时直接用产品字段作为默认值，做空值兜底
      pname: [this.products?.name || '', [Validators.required]],
      price: [this.products?.price || '', Validators.required],
      description: [this.products?.description || '', Validators.required]
    });
  }
  get fc() {
    return this.updateProductForm.controls;
  }
  submit() {
    this.isSubmitted = true;
    if (this.updateProductForm.valid) {
      alert(`You have succefully updated the form!`)
      // 后续提交逻辑写在这里
    }
  }
}

2. 修改HTML模板，正确绑定表单控件 #

• 给三个业务输入控件添加对应formControlName绑定
• 删除所有输入控件上多余的value插值绑定，响应式表单不需要手动设置value
• 修复描述字段label的for属性错误，给删除按钮添加type="button"避免误触发表单提交

<div class="container">
  <h2>Edit Product Details</h2>
  <form [formGroup]="updateProductForm" (ngSubmit)="submit()">
    <label for="pname">Product Name:</label><br>
    <input type="text" id="pname" name="pname" formControlName="pname"><br>
    <div class="error-list" *ngIf="fc.pname.errors && isSubmitted">
      <div *ngIf="fc.pname.errors.required">Should not be empty</div>
    </div>

    <label for="price">Unit Price:</label><br>
    <input type="text" id="price" name="price" formControlName="price"><br>
    <div class="error-list" *ngIf="fc.price.errors && isSubmitted">
      <div *ngIf="fc.price.errors.required">Should not be empty</div>
    </div>

    <label for="description">Product Description:</label><br>
    <textarea style="overflow: scroll; height: 200px; width: 500px;"
      id="description" name="description" formControlName="description"></textarea><br>
    <div class="error-list" *ngIf="fc.description.errors && isSubmitted">
      <div *ngIf="fc.description.errors.required">Should not be empty</div>
    </div>

    <label for="img">Change Display Image:</label><br>
    <input type="file" id="img" name="img" accept="image/*"><br><br>
    <button type="submit">Update Product Details</button>
    <button style="margin-left: 10px;" type="button">Delete Product</button>
  </form>
</div>

修改完成后，表单加载时会自动显示产品字段默认值，输入内容会实时同步到表单实例，校验规则和提交逻辑会正常触发。

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