Angular 5表单内自定义ui-textbox组件状态异常求助

问题根源 #

你遇到的控件状态联动问题，核心原因在于混合使用响应式表单与模板驱动表单，以及一些表单绑定的错误实践：

1. 表单模式混用冲突：在同一个<input>元素上同时绑定[formControl]（响应式）和[(ngModel)]（模板驱动），两种模式的状态更新机制互相干扰，导致控件的touched、invalid状态被错误同步。
2. 冗余的formGroup绑定：子组件的<input>已经处于父组件<form [formGroup]="mainForm">的上下文内，额外绑定[formGroup]="group"会让控件被错误注册到多个表单实例中，加剧状态混乱。
3. 控件注册的不可靠时序：虽然你用setTimeout延迟添加控件，但这种方式无法保证name属性已完成赋值，极端情况下可能导致控件关联错误。

解决方案（推荐完全采用响应式表单） #

我们可以彻底移除模板驱动表单的依赖，统一使用响应式表单的规范来实现组件：

1. 修改TextBoxUI组件类

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

@Component({
  selector: 'ui-textbox',
  templateUrl: './textBox.ui.html',
  styleUrls: './textBox.ui.css'
})
export class TextBoxUI implements OnInit {
  @Input() group: FormGroup;
  @Input() name: string;
  @Input() value: string = '';
  @Output() valueChange = new EventEmitter<string>();

  // 直接从父表单组中获取对应控件
  get control(): FormControl {
    return this.group.get(this.name) as FormControl;
  }

  constructor() { }

  ngOnInit() {
    // 初始化控件并添加到父组（ngOnInit时输入属性已全部赋值）
    const control = new FormControl(this.value, [Validators.required]);
    this.group.addControl(this.name, control);
    
    // 监听控件值变化，同步到父组件
    control.valueChanges.subscribe(val => {
      this.valueChange.emit(val);
    });
  }
}

2. 修改TextBoxUI模板

移除冗余的绑定，使用formControlName关联父表单的控件：

<input [formControlName]="name" type="text">

3. 页面模板保持不变

原有的父表单和组件绑定逻辑无需修改：

<form [formGroup]="mainForm">
  <div class="row">
    <ui-textbox [group]="mainForm" [name]="textBoxName1" [(value)]="textBoxValue1"></ui-textbox>
  </div>
  <div class="row">
    <ui-textbox [group]="mainForm" [name]="textBoxName2" [(value)]="textBoxValue2"></ui-textbox>
  </div>
</form>

关键说明 #

• 单一表单模式：坚持使用响应式表单（或模板驱动表单），避免两种模式混用，这是Angular表单开发的核心原则。
• 明确控件关联：通过formControlName让子组件控件直接关联父表单组中的对应实例，避免自行创建控件后再添加的不可靠方式。
• 可靠的时序处理：利用ngOnInit生命周期钩子（此时所有输入属性已完成赋值）来注册控件，无需依赖setTimeout。

修改后，每个ui-textbox的状态会独立维护，触摸或验证状态不会再出现联动错误，同时父表单的状态也会与子控件保持一致。

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