Question

我将angular-archwizard用于* ngFor

问题是如何为每个步骤创建一个动态formGroup，在下面的代码中，我为所有步骤创建了一个formForm，但是我想为每个步骤创建一个动态formGroup

<aw-wizard #wizard>

   <aw-wizard-step *ngFor="let category of categories">
      <ng-template awWizardStepTitle>
         <span class="custom-title">{{category.categoryLabel}}</span>
      </ng-template>

      <sof-form [border]="false" [formGroup]="parametersForm">
      <sof-sub-form column="2">
         <ng-container *ngFor="let parameter of category.parameters | sortBy: 'order'" [ngSwitch]="parameter.type">
         <sof-form-label>{{parameter.parameterLabel}}
            <span *ngIf="parameter.control  | includes: 'required'" style="color: red">*</span>
         </sof-form-label>
         <sof-form-item style="padding-top: 6px" id="parameters">
            <sof-input [type]="'text'" formControlName="{{parameter.parameterId}}" *ngSwitchCase="'text'"></sof-input>
            <sof-input [type]="'number'" formControlName="{{parameter.parameterId}}" *ngSwitchCase="'number'"></sof-input>
            <sof-monoselect formControlName="{{parameter.parameterId}}" [mode]="'autoComplete'" [options]="parameter.valuesList" bindLabel="label"
            bindValue="value" (onSearch)="onSearchParameter($event, parameter)" *ngSwitchCase="'monoselect'"></sof-monoselect>
            <label class="switch switch-small" *ngSwitchCase="'toggle'">
            <input type="checkbox" name="{{parameter.parameterId}}" formControlName="{{parameter.parameterId}}" (change)="checkboxAction(parameter.parameterId)">
            <span class="slider round"></span>
            </label>
         </sof-form-item>
         </ng-container>
      </sof-sub-form>
      </sof-form>

   </aw-wizard-step>

</aw-wizard>

Answer 1

<ng-container *ngFor="let parameter of category.parameters | sortBy: 'order';  let i = index" [ngSwitch]="parameter.type">
<sof-form-label [formControlName]="'formControlName' + i">{{parameter.parameterLabel}}

let i = 0;
for (const item of Array) {
  this.form.addControl('formControlName' + this.i,
    new FormControl(null, [Validators.required]));
i ++;}

动态创建formGroup

1 个答案: