Angular FormControl验证需两次点击才生效问题求助

问题现象 #

自定义待办事项表单时，单个待办项的输入验证无法正常触发——必须先聚焦输入框、点击外部失焦，再次聚焦后再失焦，验证提示才会显示。

通过排查代码发现，删除todo-item.component.html中的(updateTodoChildEvent)="updateTodo($event)"后，验证就能正常工作，希望了解该现象背后的逻辑原因。

相关组件代码 #

todo-item.component.ts #

import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormControl, FormGroup, Validators, FormBuilder} from "@angular/forms";
import {Todo} from "../todo";
import {TodoService} from "../todo.service";

@Component({
  selector: 'app-todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: ['./todo-item.component.css']
})
export class TodoItemComponent {
  @Input() todoItemsList: Todo[] = [];
  @Input() todoItem!: Todo;
  @Output() updateTodoEvent = new EventEmitter<Todo>();

  constructor(private todoService: TodoService) {
  }

  updateTodo(todo: Todo) {
    this.updateTodoEvent.emit(todo);
  }
}

todo-item.component.html #

<div>
    <form>
      <app-todo-edit
        [todoItemChild]="todoItem"
        (updateTodoChildEvent)="updateTodo($event)"
      >
      </app-todo-edit>
    </form>
</div>

todo-edit.component.ts #

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Todo} from "../todo";
import {FormControl, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-todo-edit',
  templateUrl: './todo-edit.component.html',
  styleUrls: ['./todo-edit.component.css']
})
export class TodoEditComponent implements OnInit {
  @Output() updateTodoChildEvent = new EventEmitter();
  @Input() todoItemChild!: Todo;

  formControlChild = new FormControl('', [Validators.required, Validators.minLength(3)])

  ngOnInit() {
    this.formControlChild.setValue(this.todoItemChild.name);
  }

  onChildInputChange(todo: Todo, val: string) {
    this.updateTodoChildEvent.emit({id: todo.id, name: val});
  }

  getErrorMessage() {
    if (this.formControlChild.hasError('required')) {
      return 'You must enter a value';
    }

    return this.formControlChild.hasError('minlength') ? 'Too short, should be at least 3 symbols' : '';
  }
}

todo-edit.component.html #

<form>
  <mat-form-field>
    <mat-label>Edit Todo</mat-label>
    <input
      matInput
      type="text"
      #inputRef
      (change)="onChildInputChange(todoItemChild, inputRef.value)"
      [formControl]="formControlChild"
    >
    <mat-error *ngIf="formControlChild.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</form>

问题根源解析 #

1. 嵌套表单导致的状态冲突 #

代码中存在两层嵌套的原生<form>标签：todo-item组件包含一个<form>，其内部的todo-edit组件又包含另一个<form>。Angular的表单系统会自动维护控件的状态（如pristine/dirty、touched/untouched），嵌套表单会干扰这些状态的正常传递与更新。

2. 事件触发导致控件状态重置 #

当用户输入触发onChildInputChange时，updateTodoChildEvent会向父组件传递更新后的待办项，父组件的updateTodo方法又会向外发射updateTodoEvent。这一过程会导致父组件的todoItem输入属性更新，进而触发todo-edit组件的重新渲染（如果todoItem的引用发生变化）。

此时todo-edit的ngOnInit会再次执行，调用formControlChild.setValue(this.todoItemChild.name)——这个操作会将表单控件的状态强制重置为pristine（未修改）和untouched（未触碰）。而Angular的验证提示默认只会在控件处于dirty（已修改）或touched（已触碰）状态时才显示，所以需要再次聚焦并失焦，让控件重新变为touched，验证提示才会出现。

3. 移除事件绑定后的正常逻辑 #

当删除(updateTodoChildEvent)="updateTodo($event)"后，事件传递链被打断，父组件的todoItem不会被更新，todo-edit组件的formControlChild状态不会被强制重置。此时Angular的表单验证逻辑会正常工作：用户输入时控件变为dirty，失焦时变为touched，只要控件不符合验证规则，就会立即显示错误提示。

优化建议 #

• 移除嵌套表单：Angular不推荐原生<form>嵌套，可删除外层的<form>标签，改用FormGroup管理表单结构。
• 用ngOnChanges响应输入变化：如果todoItem需要动态更新，在todo-edit组件中使用ngOnChanges钩子监听todoItemChild的变化，避免在ngOnInit中重复设置控件值导致状态重置。
• 用valueChanges替代(change)事件：直接订阅formControlChild.valueChanges来获取输入值变化，保持与表单控件状态的同步，避免手动操作DOM值引发的状态不一致。

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