0

我正在尝试使用 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>
4

0 回答 0