Javascript 表单中的viewChild不会从原始状态触发它

情况如下：

parent.component.html

<form #someForm >
  <input type="text" name="title" [(ngModel)]="parentVar" />
  <child-component />
  <input type="submit" [disabled]="someForm.form.pristine" />
</form>

  <div>
    <input type="number" name="foo" [(ngModel)]="childVar" />
  </div>

child.component.html

<form #someForm >
  <input type="text" name="title" [(ngModel)]="parentVar" />
  <child-component />
  <input type="submit" [disabled]="someForm.form.pristine" />
</form>

  <div>
    <input type="number" name="foo" [(ngModel)]="childVar" />
  </div>

---

当我更改'title'输入的值时，提交按钮被启用，但当更改'foo'输入的值时，什么也不会发生。如何从子组件渲染表单脏？

默认情况下，任何嵌套组件都不是Angular创建以跟踪状态的ngForm数据结构的一部分。您需要将表单（通过#someForm）传递到每个子组件中

---

这里有一个例子：

您可以简单地创建一个事件，当子组件中的表单发生更改时发出该事件。 在您的子组件中使用EventEmitter

试试这个：