Форма углового шага не действительна после программно установленного значения - PullRequest
1 голос
/ 24 апреля 2019

Это мой степпер:

    <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», оно мгновенно меняется на действительное. Я думаю, что есть шаг, который я пропустил, чтобы сделать форму действительной после программного изменения значения. Кто-нибудь может сказать мне мою ошибку?

Я хочу предварительно заполнить три формы, по одной на каждом шаге моего трехступенчатого степпера.

Спасибо и всего наилучшего!

...