Question

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

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

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

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

parent.component.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”>Submit</button>
    </wizard-step>
</wizard>

child-comp.component.html

<div>
    <select name=”conType” id=”conType” [(ngModel)]=”selectedConType”>
        <option value=”0”>Select type</option>
        <option [value]=type.id *ngFor=”let type of contypes; let i= index”>{{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>

Answer 1

在父组件中，您可以维护对象

{
  '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”>Submit</button>
    </wizard-step>
</wizard>

在子组件中：

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

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

1 个答案: