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

【问题标题】：Template Driven Form with Component - Passing state of the form to another component带有组件的模板驱动表单 - 将表单的状态传递给另一个组件
【发布时间】：2019-08-20 13:48:48
【问题描述】：

嗯，我想使用模板驱动表单... 问题是，我将表单放在一个组件中，然后我在模态中调用该组件，但我需要传递表单的状态以使模态验证按钮。

我的表单组件：

<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"）

【问题讨论】：

为什么不能将表单作为道具传递给 Modal？
其实不是我的项目。我只是负责做验证。所以我试图不改变任何东西，比如将表单传递给模态，就像你建议的那样。不过还是谢谢。如果没有其他选择，我会与负责人交谈以更改它。

标签： angular

【解决方案1】：

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

父组件.html

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

子组件.ts

@Input formValues: any

【讨论】：

实际上我正在尝试这个方法，但是有两种方式绑定......但我不断收到这个错误“没有将“exportAs”设置为“form”的指令“我要去使用它来验证按钮，因为我只是将表单传递给孩子，而不是获取有效与否的信息。
为什么在父组件中使用双向绑定？如果您需要将模态作为父组件中表单的一部分，我建议为该模态创建一个单独的表单，然后将该模态表单作为父表单的子级并将其嵌套。