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

时间:2019-04-24 11:34:36

标签: angular angular-material2

这是我的步进机

    <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”,它将立即变为有效。我认为在以编程方式更改值之后,我错过了使表单有效的步骤。 有人可以告诉我我的错误吗?

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

谢谢您,并致以诚挚的问候!

0 个答案:

没有答案