0

我正在将ngx与 mat stepper 一起使用。我能够获取表单，但步进器未显示下拉列表

步进器：

<form [formGroup]="form" (ngSubmit)="submit()">
  <mat-horizontal-stepper>
    <mat-step *ngFor="let step of steps; let index = index; let last = last;">
      <ng-template matStepLabel>{{ step.label }}</ng-template>
      <formly-form [form]="form.at(index)" [model]="model" [fields]="step.fields" [options]="options[index]">
      </formly-form>

      <div>
        <button *ngIf="index !== 0" matStepperPrevious class="btn btn-primary" type="button"
          (click)="prevStep(index)">Back</button>
        <button *ngIf="!last" matStepperNext class="btn btn-primary" type="button" [disabled]="!form.at(index).valid"
          (click)="nextStep(index)">Next</button>
        <button *ngIf="last" class="btn btn-primary" [disabled]="!form.valid" type="submit">Submit</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>
</form>

代码：

import { Component, OnInit } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';

export interface StepType {
  label: string;
  fields: FormlyFieldConfig[];
}

@Component({
  selector: 'app-step-profile',
  templateUrl: './step-profile.component.html',
  styleUrls: ['./step-profile.component.css']
})
export class StepProfileComponent implements OnInit {
  activedStep = 0;
  model = {};
  steps: StepType[] = [
    {
      label: 'details',
      fields: [
        {
          key: 'somekey',
          type: 'select',
          templateOptions: {
            label: 'label',
            options: [
              { name: 'Iron Man', value: 'iron_man' },
              { name: 'Captain America', value: 'captain_america' },
              { name: 'Black Widow', value: 'black_widow' },
              { name: 'Hulk', value: 'hulk' },
              { name: 'Captain Marvel', value: 'captain_marvel' }
            ]
          }
        }
      ]
    }
  ];

  form = new FormArray(this.steps.map(() => new FormGroup({})));
  options = this.steps.map(() => <FormlyFormOptions>{});

  constructor() { }

  ngOnInit() {
  }

  prevStep(step) {
    this.activedStep = step - 1;
  }

  nextStep(step) {
    this.activedStep = step + 1;
  }

  submit() {
    alert(JSON.stringify(this.model));
  }

}
4

1 回答 1

0

我通过执行以下操作得到了这个工作：

     {
        key: 'something',
        type: 'select',
        defaultValue: "hulk",
        templateOptions: {
          label: 'label',
          options: [
            { name: 'Iron Man', value: 'iron_man' },
            { name: 'Captain America', value: 'captain_america' },
            { name: 'Black Widow', value: 'black_widow' },
            { name: 'Hulk', value: 'hulk' },
            { name: 'Captain Marvel', value: 'captain_marvel' }
          ],
          labelProp: "name",
          valueProp: "value"
        }
    }

所以看起来你只需要添加 labelProp 和 valueProp 属性。

于 2020-05-17T09:33:13.820 回答