ng-content 块和外部表单之间的引用 ngForm

Question

我正在使用一个有 2 个元素的组件。在其中一个中，我注入了这样的表格：

<form #form="ngForm">

在另一个中，我想在其上使用 form.valid 和 form.pristine 的按钮，如下所示：

<button [disabled]="!form.valid || form.pristine">

这不起作用，因为按钮位于表单本身之外并且位于单独的 ng-content 元素中（该部分可能不相关）。

我尝试过使用：

@ViewChild('form') form!: ngForm

不幸的是，这最终是未定义的。

谢谢！

Answer 1

你是在正确的轨道上，我们可以只创建一个视图子级，但该值只会在

ngAfterViewInit

上设置，因此我们可以将对视图子级的引用存储在服务变量上，然后使用该变量来查找值在我们不相关的组件上

创建服务：

export class SomeService {
    refForm!: Form;
}

表单所在组件中

@ViewChild('form', {static: false}) form!: ngForm; 
...

...
constructor(private someService: SomeService) {}
...

...
ngAfterViewInit() {
    this.someService.refForm = this.form;
}
...

最后，在您投影按钮内容的组件中

在 TS 文件中添加 getter 方法，该方法将转发表单以进行检查

...

...
constructor(private someService: SomeService) {}
...

...
get form() {
    return this.someService.refForm;
}

组件 html（确保添加安全检查

?.

，这样如果表单未定义，就不会出现错误！）

<button [disabled]="!form?.valid || form?.pristine">