Angular 4 Stepper不工作

Question

我创建了一个水平步进器，每个步骤都有一些表格。步骤1包含一个带有一些输入字段的用户表单。除非所有字段都填充，步进器不会继续。但问题是即使所有字段都填充了步进器仍然不会继续。可能是什么问题？

Stepper.component.html -

<mat-horizontal-stepper  [linear]="true">
  <mat-step  [stepControl]="firstStepper">
    <ng-template matStepLabel>Personal Information</ng-template>
  <app-user-form></app-user-form>
</mat-step>

  <mat-step [stepControl]="secondStepper">
    <ng-template matStepLabel>Education</ng-template>
    <app-page2></app-page2>
  </mat-step>

  <mat-step [stepControl]="thirdStepper">
    <ng-template matStepLabel>Additional Information</ng-template>
  </mat-step>
</mat-horizontal-stepper>

Stepper.component.ts -

import { Component, OnInit,ViewEncapsulation } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";


@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.css'],
  encapsulation: ViewEncapsulation.None

})
export class StepperComponent implements OnInit {

  isLinear = true;
  firstStepper : FormGroup;
  secondStepper : FormGroup;
  thirdStepper : FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.firstStepper = this.formBuilder.group({
      firstName :['',Validators.required],
      lastName :['',Validators.required],
      address :['',Validators.required],
      city :['',Validators.required],
      pincode :['',Validators.required],
      state :['',Validators.required]

    });
  }

}

用户form.component.html -

<form class="example-form" [formGroup]="firstStepper">

  <table class="example-full-width" cellspacing="0"><tr>
    <td><mat-form-field class="example-full-width">
      <input matInput placeholder="First name" formControlName="firstName">
      <mat-error *ngIf="firstStepper.controls['firstName'].errors ?.required">Please Enter the First Name</mat-error>
    </mat-form-field></td>
    <td><mat-form-field class="example-full-width">
      <input matInput placeholder="Last Name" formControlName="lastName">
      <mat-error *ngIf="firstStepper.controls['lastName'].errors ?.required">Please Enter the Last Name</mat-error>
    </mat-form-field></td>
  </tr></table>

  <table class="example-full-width" cellspacing="0"><tr><td>
  <mat-radio-group class="example-radio-group" [(ngModel)]="selectedGender" [ngModelOptions]="{standalone: true}">
    <mat-radio-button class="example-radio-button" *ngFor="let gender of genders" [value]="gender">
      {{gender}}
    </mat-radio-button>
  </mat-radio-group>
  </td></tr></table>

  <table class="example-full-width" cellspacing="0">
    <tr>
    <td>
    <mat-form-field class="example-full-width">
      <textarea matInput placeholder="Address" formControlName="address"></textarea>
      <mat-error *ngIf="firstStepper.controls['address'].errors ?.required">Please Enter the Address</mat-error>
    </mat-form-field>
    </td>
      <td><mat-form-field class="example-full-width">
        <input matInput placeholder="Email" [formControl]="emailFormControl">
        <mat-error  *ngIf="emailFormControl.hasError('required')">Please Enter a valid email id</mat-error>
      </mat-form-field>
      </td>
    </tr>
  </table>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><mat-form-field class="example-full-width">
      <input matInput placeholder="City" formControlName="city">
      <mat-error *ngIf="firstStepper.controls['city'].errors ?.required">Please Enter the City</mat-error>
    </mat-form-field></td>
    <td><mat-form-field class="example-full-width">
      <input matInput placeholder="State" formControlName="state">
      <mat-error *ngIf="firstStepper.controls['state'].errors ?.required">Please Enter the State</mat-error>
    </mat-form-field></td>
    <td><mat-form-field class="example-full-width">
      <input matInput #postalCode maxlength="5" placeholder="Postal Code" formControlName="pincode">
      <mat-error *ngIf="firstStepper.controls['pincode'].errors ?.required">Please Enter the Pincode</mat-error>
      <mat-hint align="end">{{postalCode.value.length}}/5</mat-hint>
    </mat-form-field></td>
  </tr></table>

  <p>
    <button mat-button matStepperNext (click)="saveSanckBar()">Save</button>
  </p>
</form>

用户form.component.ts -

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {MatSnackBar} from '@angular/material';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class UserFormComponent implements OnInit {

  selectedGender: string;
  firstStepper : FormGroup;
  genders=[
    'Male',
    'Female',
    'Others'
  ]

  emailFormControl = new FormControl('', [
    Validators.required,Validators.email
  ]);


  constructor(public snackBar: MatSnackBar, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.firstStepper = this.formBuilder.group({
      firstName :['',Validators.required],
      lastName :['',Validators.required],
     address :['',Validators.required],
      city :['',Validators.required],
      pincode :['',Validators.required],
      state :['',Validators.required]

    });

  }
  getErrorMessage() {
    return this.emailFormControl.hasError('required') ? 'You must enter a value' :
      this.emailFormControl.hasError('email') ? 'Not a valid email' :
        '';
  }

  openSnackBar() {
    let snackBarRef = this.snackBar.open(this.selectedGender,'', {
      duration: 1000
    });
  }

  saveSanckBar(){
    if (this.firstStepper.valid) {
      let snackBarRef = this.snackBar.open("Saved Successfully", '', {
        duration: 1000
      });
    }
  }
}