我正在尝试使用 Material Stepper 构建一个反应式/模型驱动的表单,但是我遇到了一个问题。我正在插入“app-telephone-picker”,这是一个使用模板驱动表单构建的单独组件。
我意识到我不能在反应/模型驱动的表单中使用 [(ngModel)],但是当我删除它时,Material Stepper Next 按钮不会将表单移动到下一步。如果我保留 [(ngModel)],那么 Material Stepper Next 按钮确实有效。
我有第二个表单组,此处未显示,放置在 mat-vertical-stepper 标记中。
<mat-vertical-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Enter your number</ng-template>
<label>Phone number</label>
<app-telephone-picker name="telephones"
formControlName="telephones"
class="form-control"
matInput
[countries]="countries"
[(ngModel)]="telephone">
</app-telephone-picker>
<div *ngIf="telephones.invalid && telephones.touched" class="invalid-feedback">
<div class="text-red-500" *ngIf="telephones?.errors?.required">
Phone number required
</div>
</div>
<button mat-button matStepperNext>
Next
</button>
</form>
</mat-step>
</mat-vertical-stepper>