小编Ric*_*ino的帖子

我使用的是matStepper，当我将selectedIndex设置为3时，无法使用下一个和上一个导航。我可以单击水平步进器中的（1），然后照常使用下一个/上一个。所有表格均有效，单击（1）后，我可以使用1-7的下一个导航。

注意我有this.selectedIndex = 3; 硬编码

<mat-horizontal-stepper #stepper
                        [linear]="true"
                        [selectedIndex]="this.selectedIndex"
                        (selectionChange)="selectionChange(stepper)">

  <mat-step [stepControl]="form1">
    <app-observer-information></app-observer-information>
  </mat-step>
...
  <mat-step [stepControl]="form7">
    <app-observer-agreement></app-observer-agreement>
  </mat-step>

</mat-horizontal-stepper>



export class ObservationStatementStepperComponent implements OnInit {

  @ViewChild('ObserverInformationComponent') public component1: ObserverInformationComponent;
  ..
  @ViewChild('ObserverAgreementComponent') public component7: ObserverAgreementComponent;

  public selectedIndex: number;

  constructor(private sorDataService: SorDataService) {

    this.selectedIndex = 3; // Number(sorDataService.selectedIndex);
  }

  public ngOnInit() {
  }

  public selectionChange(stepper) {

    this.sorDataService.synchronizeStepper(stepper.selectedIndex + 1);
  }

  /**
   * @see /sf/ask/3394927651/
   */
  get form1() {
    return this.component1 ? this.component1.form : null;
  }
  ...
  get form7() {
    return this.component7 …

我正在使用反应式表单，我似乎遇到了看似随机的表单字段的问题。关于为什么会发生这种情况的任何想法都是合理的。

如果有帮助，我刚刚开始使用 angular 和 material 7

有趣的是，在表单中添加和删除元素会导致其他元素出现问题。

ERROR 错误：没有未指定名称属性的表单控件的值访问器

TS

export class VolunteerApplicationPersonalStepComponent implements OnInit 
{

  public readonly form: FormGroup;
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
          businessTelephoneExt: [''],
          otherTelephone: [''],
          otherTelephoneExt: [''],
        });
      }
}

HTML

    <form [formGroup]="form">

     <mat-form-field>
        <input matInput i18n-placeholder placeholder="Business Extension"
               [formControl]="form.get('businessTelephoneExt')">
      </mat-form-field>

      <app-telephone-input i18n-placeholder placeholder="Other Telephone"
                           [formControl]="form.get('otherTelephone')">
      </app-telephone-input>

      <mat-form-field>
        <input matInput i18n-placeholder placeholder="Other Extension"
               [formControl]="form.get('otherTelephoneExt')">
      </mat-form-field>

      <br>

      <div class="group-margin group-min-width">
        <button mat-stroked-button color="primary" matStepperPrevious i18n>Previous</button>
        <button mat-raised-button color="primary" matStepperNext (click)="next()" i18n>Next</button>
      </div>
    </form>

正如有人建议的 .. …

我在模态的底部添加了一个文本区域，自动对焦具有滚动到底部的副作用。没有这种自动对焦将解决此问题。不知道发生了什么。

  <mat-form-field >
      <textarea matTextareaAutosize matInput placeholder="Review Notes" [autofocus]="false" [(ngModel)]="reviewNotes"></textarea>
  </mat-form-field>

“ @ angular / material”：“ ^ 6.4.7”，