时间戳

首页 > 解决方案 > 如何访问在同一个父组件中多次使用的子组件的不同输入的值？

angular - 如何访问在同一个父组件中多次使用的子组件的不同输入的值？

问题描述

我提到了所有其他相关的 SO 问题，但没有一个提供线索来解决我的问题。

在我的应用程序中，我有一个包含多个页面的向导（父组件），其中很少有页面重用相同的子组件。子组件具有不同类型的输入字段。当用户在一个向导页面中更改这些输入字段中的任何值时，应在允许用户移动到下一个向导页面之前验证输入值。最终向导页面将具有提交按钮，该按钮应收集所有向导页面的所有输入并调用服务器 API。每个向导页面都会有返回和继续按钮，因此用户可以随时向前移动（如果当前页面值被验证）和向后移动，来回移动时，已经输入的输入值应该保留在相应的输入元素中。在最终向导页面上提交后，向导将关闭。

子组件的验证逻辑在其每个实例上都是相同的。

如何通过提供前缀作为子组件的输入来动态更改 ngModel 名称，以及如何在表单提交期间从父组件引用该 ngModel 值？

父组件.html

<wizard>
    <wizard-step>
        <child-comp></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp></child-comp>
    </wizard-step>
    <wizard-step>
        <button type=”submit”&gt;Submit</button>
    </wizard-step>
</wizard>

子comp.component.html

<div>
    <select name=”conType” id=”conType” [(ngModel)]=”selectedConType”&gt;
        <option value=”0”&gt;Select type</option>
        <option [value]=type.id *ngFor=”let type of contypes; let i= index”&gt;{{type.name}}</option>
</select>
    Input1: <input type=”text” name=”input1” id=”input1” [(ngModel)]=”input1” (focus)="checkValues1" (keyup)="validateInput1"/>
    Input2: <input type=”text” name=”input2” id=”input2” [(ngModel)]=”input2” (focus)="checkValues2" (keyup)="validateInput2"/>
    Input3: <input type=”text” name=”input3” id=”input3” [(ngModel)]=”input3” (focus)="checkValues3" (keyup)="validateInput3"/>
</div>

标签： angulartypescriptparent-child

解决方案

在 Parent Component中，您可以维护对象

{
  'step1': {
    'selectedConType': ''
  },
  'step2': {
    'selectedConType': ''
  },
  'step3': {
    'selectedConType': ''
  },
  'step4': {
    'selectedConType': ''
  }
}

您需要将访问类型作为输入传递给子组件

<wizard>
    <wizard-step>
        <child-comp accesstype="step1"></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp accesstype="step2"></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp accesstype="step3"></child-comp>
    </wizard-step>
    <wizard-step>
        <child-comp accesstype="step4"></child-comp>
    </wizard-step>
    <wizard-step>
        <button type=”submit”&gt;Submit</button>
    </wizard-step>
</wizard>

在子组件中：

您可以使用 EventEmitter() 将值从子组件发送到父组件。

推荐阅读