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