带组件的模板驱动表单 - 将表单的状态传递给另一个组件

Question

好吧，我想使用模板驱动的表单... 问题是，我在一个组件中具有窗体，然后在模态中调用此组件，但是我需要传递窗体的状态以使 Modal 验证按钮。

我的表单组件：

<form #form="ngForm" novalidate>
<div class="form-group">
<label>Descrição:</label>
<input type="text" class="form-control" name="Descrição" required
[(ngModel)]="selectedVendedorAcao.descricao">
</div>
</form>

我在页面中的模态：

<p-dialog *ngIf="selectedVendedorAcao != null && selectedVendedorAcao.vm != null" header="Informações da Ação"
[(visible)]="OpenModal" [baseZIndex]="2001" [style]="{ width: '40%'}">
<app-vendedor-acao-modal
[(tipoAcaoVendedor)]="tipoAcaoVendedor" 
[(statusAcao)]="statusAcao"
[(selectedVendedorAcao)]="selectedVendedorAcao">
</app-vendedor-acao-modal>
<p-footer>
<button type="button" class="btn btn-default pull-left" (click)="OpenModal = false">Cancelar</button>
<button type="button" class="btn btn-success" *ngIf="selectedVendedorAcao.id == null" (click)="Upsert()">Salvar</button>
</p-footer>
</p-dialog>

所以，我需要获取#Form(form.valid(并发送到模态。这样我就可以对按钮"Salvar"([disabled]="!form.valid"(进行一些验证

Answer 1

尝试在模态中使用 Angular @Input(( 运算符。您可以在父组件中向下传递窗体，然后在子模式组件中，只需使用 @Input 运算符导入窗体。

父组件.html

<child-component [formValues]="ngForm"></child-component>

子组件 .ts

@Input formValues: any