Question

我正在使用角度材料当前最新version。我想将他们的垂直步进组件用于移动布局。我需要使用线性属性，以便用户可能无法继续，直到前面的步骤没有完成。我还提供了一些验证和错误消息，以便用户了解他们缺少的内容。

上述步骤一切正常。验证正在运行，显示错误消息，不允许用户转到下一步。唯一的问题是，即使在完成所有必填字段之后，用户仍然无法进入下一步，并且当前步骤未关闭，如演示中所示。

这是我实际想要实现的一个例子。 [Example for the demo]。不一定需要突出显示自己的标签。只是想进入下一步并在完成后折叠当前步骤。

以下是我的HTML代码：

<mat-vertical-stepper linear>
<!--First Step starts-->
  <mat-step [stepControl]="firstFormGroup">
  <div class="step-container" fxLayout="column" fxFlex="90" fxFlexOffset="5" fxFlex.gt-md="40" fxFlexOffset.gt-md="25">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Shipping</ng-template>
      <mat-form-field>
        <input matInput placeholder="First name" [formControl]="firstName" required>
        <mat-error *ngIf="firstName.hasError('required')">
          Please enter your first name
        </mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Last name" [formControl]="lastName" required>
        <mat-error *ngIf="lastName.hasError('required')">
           Please enter your last name
        </mat-error>
      </mat-form-field>
      <div>
        <button class="btn-submit" color="primary" mat-raised-button matStepperNext>Next</button>
      </div>
    </form>
</div>
</mat-step>
<!--First Step ends-->
<!--Second Step starts-->
  <mat-step [stepControl]="secondFormGroup" optional>
      <ng-template matStepLabel>Fill out your address</ng-template>
        Done
        <button mat-button matStepperPrevious>Back</button>
  </mat-step>
  <!--Second Step starts-->
</mat-vertical-stepper>

我的组件打字稿：

import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../router.animations';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html',
  styleUrls: ['./checkout.component.css'],
  animations: [routerTransition()],
  host: {'[@routerTransition]': ''}
})
export class CheckoutComponent implements OnInit {

  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  firstName = new FormControl ();
  lastName = new FormControl();


  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

}

我推测它是因为当我使用FormControl

时

Answer 1

您将输入绑定到不属于FormGroup

的表单控件

更改

firstName = new FormControl ();
lastName = new FormControl();

要

get firstName() { return this.firstFormGroup.get('firstName'); }
get lastName() { return this.firstFormGroup.get('lastName'); }

这是因为FormBuilder为您创建了FormControls。

this.firstFormGroup = this._formBuilder.group({
  // creates the internal firstName FormControl
  firstName: ['', Validators.required],
  // creates the internal lastName FormControl
  lastName: ['', Validators.required],
});

Angular Material 2垂直步进带验证并转到下一步

1 个答案: