Question

我具有以下表单模式组件：

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close" aria-label="Close"
     (click)="activeModal.dismiss('Cross click')">
    </button>
</div>

<ng-content #form></ng-content>

<div class="modal-footer">
    <button class="btn btn-primary btn-danger" (click)="onCancel()">
        Cancel
      </button>
    <button class="btn btn-primary btn-success" type="submit" form="formModal" [disabled]="form.formModalGroup?.invalid">
        Save
      </button>
</div>

ng-content本身具有特定形式。问题是如何从ng-content到此父form-modal组件获取formGroup有效性状态。我尝试从特定的表单组件（也就是@ContentChild）冒泡一个事件，并且我也想出了一个非常类似的问题：

Disable/Enable submit button in parent component when forms are in child component

但是，当直接将引用添加到ng-content标签时，该修补程序似乎不起作用。

Answer 1

它应该在您的TS中与@ContentChild一起使用：

@ContentChild(YourComponentType, {static: true}) childComponent:YourComponentType;

在您的HTML中：

[disabled]="!childComponent || childComponent.formModalGroup?.invalid"

Answer 2

正如我在您的代码上看到的那样，您面临着一个我们共同面临的共同问题：父母/子女/兄弟姐妹之间的沟通...

如果您想对TS文件中表单有效性的更改做出反应，我可以看到2个主要选项：

使用@ContentChild：

@ContentChild("form", {static: false}) form;

ngAfterContentInit() {
    // here now you can access to the form instance, and subscribe to changes on the status
    this.form.statusChanges.subscribe(
        result => console.log(result)
    );

  }

此答案的完整示例：https://stackoverflow.com/a/49666202/6852402

考虑在2个组件之间使用共享服务，并使用BehaviorSubject可观察的对象。 BehaviorSubject是基于RxJ的状态库的基础。

在这里您可以看到完整的说明和示例：https://medium.com/@weswhite/angular-behaviorsubject-service-60485ef064fc

表单处于ng-content时如何禁用/启用父组件中的提交按钮

2 个答案: