Angular Stepper - addControl 和验证器的问题

Question

我目前正在 Angular 中开发一个步进器。当我在子组件中导入的 formControl 上使用 addControl 时，我面临着挑战。当我添加的控件具有验证器时，formControl不会立即切换到valid：false。我需要转到下一步或上一步才能更新该值。

为了更清楚地了解我遇到的问题，我创建了一个 StackBlitz 演示：StackBlitz 链接

代码中主要关注的方面是：

• src/main.ts
• src/stepper1/stepper1.component.ts
• src/stepper2/stepper2.component.ts
• src/app.component.ts
• src/app.module.ts
• src/stepper3/stepper3.component.ts

任何有关如何解决此问题的帮助或见解将不胜感激。预先感谢您！

Answer 1

是的，情况发生了变化，但是...

当您加载子组件并更改某些内容时，这不会像双向绑定那样工作，如果您执行以下操作：

 ngOnInit(): void {
    setTimeout(() => {
      if (this.formGroup) {
        this.formGroup.addControl(
          '_name',
          this.fb.control('', [Validators.required])
        );
      }
    }, 2000);
  }

这是因为子组件中的所有html都是在添加新控件之前加载的

如何避免这种情况，你可以在父控件上订阅表单

this.formStep2.valueChanges.subscribe((e) => {
      console.log(this.formStep2);
    });