Question

这是我的步进机

    <mat-vertical-stepper [linear]="true" #stepper>
      <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
          <mat-form-field>
            <mat-select formControlName="firstCtrl" placeholder="Name" (selectionChange)="onChange($event)" required>
              <mat-option *ngFor="let device of deviceList" [value]="device">
                {{device}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <div>
            <button mat-button matStepperNext [disabled]="!firstFormGroup.valid">Next</button>
          </div>
        </form>
      </mat-step>
      <mat-step>
        ....
      </mat-step>
    </mat-vertical-stepper>

这是我的组件代码：

        export class Component implements OnInit, OnDestroy  {

          @ViewChild('stepper') private stepper: MatStepper;
          deviceList: any;

          constructor(private _formBuilder: FormBuilder) { }

          ngOnInit() {
             this.firstFormGroup = this._formBuilder.group({
             firstCtrl: new FormControl(
              '', [Validators.required])
             });

             this.deviceList = ["Device 1", "Device 2", "Device 3"];

             this.firstFormGroup.controls['firstCtrl'].setValue("Device 2", { onlySelf: true});

             this.stepper.next();
          }
        }

由于某些原因，通过setValue().设置值后，该表格无效因此，“下一个”按钮没有被激活，stepper.next()当然也不起作用。如果我手动将选择框更改为“设备1”，它将立即变为有效。我认为在以编程方式更改值之后，我错过了使表单有效的步骤。有人可以告诉我我的错误吗？

我想预填充三种形式，在我的三步步进器的每一步中填充一个。

谢谢您，并致以诚挚的问候！

以编程方式setValue后角步进表格无效

0 个答案: