'In angular linear stepper not able to move next step?

I am using angular linear stepper. for each step i am using seprate formGroup. In formGroup some fields are optional. when i fill optional input part it works or when it is empty it does not work.
FormGroup for step 1

formVal=new FormBuilder.group({
     fName:['',Validators.required],
     lName:[''] //Optional part
})

when i enter lname then only it goes to next step. I want to move to next step even there is no lName.

<mat-stepper #stepper [linear]="true">
  <mat-step [stepContol]="formVal" >
    <form [formGroup]="formVal">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field appearance="fill">
        <mat-label>Name</mat-label>
        <input matInput formControlName="fName" placeholder="First name">
      </mat-form-field>
      <mat-form-field appearance="fill">
        <mat-label>last Name</mat-label>
        <input matInput formControlName="lName" placeholder="Last name">
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="step_2" >
    <form [formGroup]="step_2">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field appearance="fill">
        <mat-label>Address</mat-label>
        <input matInput formControlName="add" placeholder="Ex. 1 Main St, New York, NY"
               required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
</mat-stepper>



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source