Как использовать материал степпера в Angular 5 - PullRequest
Новая
       11

Как использовать материал степпера в Angular 5

0 голосов
/ 14 мая 2018

В настоящее время я немного новичок в Angular, и я пытаюсь понять, как сделать простой степпер, который работает (1) - (2) - (3).

У меня естьhtml down as app.component.html 

<mat-horizontal-stepper [linear]="true" #stepper>
    <mat-step label="Step 1">
        step 1
    </mat-step>
    <mat-step label="Step 2">
        step 2
    </mat-step>
</mat-horizontal-stepper>

Однако, что мне нужно импортировать и сделать в машинописи, чтобы это работало?У меня app.component.ts как 

import { Component, ViewChild } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  @ViewChild('stepper') stepper;
  changeStep(index: number) {
    this.stepper.selectedIndex = index;
  }
}

1 Ответ

0 голосов
/ 14 мая 2018

Импортируйте следующие компоненты углового материала и используйте тот же код, что и у вас

Module.ts 

import { MatStepperModule, MatInputModule, MatButtonModule, MatAutocompleteModule } from '@angular/material';


@NgModule({
    imports: [
        ...    
        MatStepperModule,
        MatInputModule,
        MatButtonModule,
        MatAutocompleteModule,                        
    ],...

HTML 

<mat-horizontal-stepper [linear]="isLinear"> 
    <mat-step [stepControl]="firstFormGroup">
       <form [formGroup]="firstFormGroup">  
        <ng-template matStepLabel>Step 1</ng-template>  
        <button mat-button mat-raised-button color="primary" matStepperNext>Solve</button>        
      </form>
    </mat-step>

    <mat-step [stepControl]="secondFormGroup">
      <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>Step 2</ng-template>
        <mat-form-field>
            <input matInput placeholder="Any input" formControlName="secondCtrl" required>
        </mat-form-field>
        <button mat-button mat-raised-button color="primary" matStepperNext>Next</button>          
        <button mat-button mat-raised-button color="" matStepperPrevious>Back</button>        
      </form>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel icon>Done</ng-template>
      You are now done.      
      <button mat-button mat-raised-button color="primary" >Done</button>      
    </mat-step>
</mat-horizontal-stepper>

Component.ts 

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

....
export class ComponentStepper{

  isLinear = true;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder){} 

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

Это полная демоверсия даже с валидациями FormGruop

...