How to use the @covalent/core.StepState.Required function in @covalent/core

import { Component, OnInit } from '@angular/core';
import {StepState} from "@covalent/core";
import {RetailShopsService, RetailShop} from "../../../services/shop.service";
import {Observable} from "rxjs";
import {DistributorService, ItemsService, Product} from "../../../services/items.service";

@Component({
  selector: 'app-add-stock',
  templateUrl: './add-stock.component.html',
  styleUrls: ['./add-stock.component.scss']
})
export class AddStockComponent implements OnInit {

  stateStep1: StepState = StepState.Required;
  stateStep2: StepState = StepState.Required;
  stateStep3: StepState = StepState.Required;
  disabled: boolean = false;
  shop: RetailShop;
  shops: RetailShop[];
  state: number = 1;
  entryType: string;
  products: Product[];

  constructor(private _shopService: RetailShopsService,
              private _itemService: ItemsService,
              private _distributorService: DistributorService) {

  }

  ngOnInit() {

});
  }

    triageFormGroup: FormGroup;

    yesno = [
        {name: 'Yes', viewValue: 0},
        {name: 'No', viewValue: 1}
    ];
    sexes = [
        {name: 'Female', viewValue: 'female'},
        {name: 'Male', viewValue: 'male'}
    ];

    activeDeactiveStep1Msg: string = 'No select/deselect detected yet';
    stateStep2: StepState = StepState.Required;
    stateStep3: StepState = StepState.Complete;
    disabled: boolean = false;

    toggleRequiredStep2(): void {
        this.stateStep2 = (this.stateStep2 === StepState.Required ? StepState.None : StepState.Required);
    }

    toggleCompleteStep3(): void {
        this.stateStep3 = (this.stateStep3 === StepState.Complete ? StepState.None : StepState.Complete);
    }

    activeStep1Event(): void {
        this.activeDeactiveStep1Msg = 'Active event emitted.';
    }

    deactiveStep1Event(): void {