Reactive Form中Validators.Required在FormControl上不生效问题

嘿，你遇到的这个问题其实是因为把多个输入框绑定到了同一个FormControl，这完全不符合响应式表单的设计逻辑哦！一个FormControl本来就应该对应单个表单控件（比如一个输入框），当你把三个输入都绑到note上时，它们会共享同一个值和验证状态——只要其中一个输入填了内容，note控件就会被标记为有效，所以你的必填验证看起来就像“失效”了。

如果你的需求是每个循环项都需要一个必填的note输入框，那必须用FormArray来处理这一组动态控件，每个输入框对应数组里的独立FormControl。

第一步：在Component里重构表单 #

修改你的app.component.ts，把单一的note控件换成FormArray，每个模拟数据项对应一个带必填验证的FormControl：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 替换成你实际的模拟数据数组
  mockData = [{id: 1}, {id: 2}, {id: 3}];
  noteForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单：用FormArray存储每个note的控件
    this.noteForm = this.fb.group({
      notes: this.fb.array(
        // 给每个模拟数据项创建一个必填的FormControl
        this.mockData.map(() => this.fb.control('', Validators.required))
      )
    });
  }

  // 快捷方法，方便模板里快速获取FormArray
  get notesArray(): FormArray {
    return this.noteForm.get('notes') as FormArray;
  }

  // 提交表单逻辑
  onSubmit() {
    if (this.noteForm.valid) {
      console.log('表单提交数据：', this.noteForm.value);
      // 这里添加你的实际提交代码
    }
  }
}

第二步：在模板中循环绑定对应控件 #

修改app.component.html，循环遍历notesArray.controls，把每个输入框绑定到数组里对应的FormControl：

<form [formGroup]="noteForm" (ngSubmit)="onSubmit()">
  <!-- 用index关联模拟数据和FormArray的控件 -->
  <div *ngFor="let item of mockData; let i = index" class="note-item">
    <label>Note {{i+1}}:</label>
    <input 
      type="text" 
      [formControlName]="i" 
      placeholder="请输入内容"
    >
    <!-- 显示必填错误提示（控件未填且被触碰后） -->
    <span class="error-text" *ngIf="notesArray.controls[i].invalid && notesArray.controls[i].touched">
      此项为必填内容
    </span>
  </div>

  <!-- 只有整个表单有效时，提交按钮才启用 -->
  <button type="submit" [disabled]="noteForm.invalid">提交</button>
</form>

为什么这能解决问题？ #

• 每个输入框都绑定到独立的FormControl，它们的值和验证状态完全独立，不会互相干扰
• FormArray会自动跟踪所有子控件的验证状态，只有当所有note输入框都填写了内容时，整个表单才会被标记为有效，提交按钮才会启用
• 后续如果模拟数据的数量变化（比如新增或删除项），只要同步更新FormArray的控件数量就能适配，扩展性很强

如果你真的需要多个输入框绑定到同一个值（比如多个输入框修改同一份数据），那必填验证的逻辑本来就是只要这个值存在就通过——但这显然不是你当前的需求。你的场景是每个循环项的note都必填，所以FormArray是唯一正确的解决方式。

内容的提问来源于stack exchange，提问作者Adnan Abdul Khaliq