javascript - angularマテリアルステッパーを使用して、入力タイプのテキストにカスタム検証を追加します

Question

angular ステッパーを使用してすべてのデータを表示し、いくつかのテキスト ボックスに入力しますが、ユーザーがボタンをクリックしたときにカスタム検証を追加したいと考えていNextます。

stackblitz - マテリアルステッパーカスタム検証

html:

<mat-horizontal-stepper #stepper>
  <mat-step>
    <div class="m-10">
      <input type="text" id="fname" placeholder="First Name" >
      </div>
      <div class="m-10">
      <input type="text" id="lname" placeholder="Last Name" >
      </div>
      <div>
        <button mat-button (click)="checkData()" matStepperNext>Next</button>
      </div>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>      
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

ここでは、次のステッパーに進む前に名と姓を検証する必要がありますが、formGroup は使用しません。

TS:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
  selector: 'stepper-optional-example',
  templateUrl: 'stepper-optional-example.html',
  styleUrls: ['stepper-optional-example.css']
})
export class StepperOptionalExample implements OnInit {

  constructor() {}

  ngOnInit() { }

  checkData() {    
    let lname = (<HTMLInputElement>document.getElementById("fname")).value;
    if(lname == '') {
      alert('error');
    }
    return false;
  }
}

どのように？Next- ファースト ネームが空の場合は、ステッパーを許可しないでください。