Validation of dropdown not working (button not enables)

Question

I try to make simple input form and want to make validation (when dropdown selected - button must be enables and disable, overwise).

constructor(public fb: FormBuilder) {
     }

  /**
   * Form
   */

   inputForm = new FormGroup({
    versionControl: new FormControl('', Validators.required),
     someDataControl: new FormControl('', [Validators.required]),
     someControl3: new FormControl('True'),
     someControl4: new FormControl('', [Validators.required]),
     somwControl5: new FormControl('', [Validators.required]),
     someControl6: new FormControl('True'),   
     button:new FormControl('',[Validators.required])
  });

 


 get f() {
    return this.inputForm.controls;
  }

  /**
   * Show report - load data to Server
   */
 onShow()
  {
    

  }

@import "~bootstrap/dist/css/bootstrap.css";

.wrapper {
  display: grid;

}

#grid {
  display: grid;
  grid-template-rows:  1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1vw;
  border: 1px solid black;
  margin: 10px;
}


#grid > div {
  font-size: medium;
  padding: .5em;
  background: white;
  text-align: justify;
}

.flex-container {
  display: flex;
  flex-wrap: wrap

}

.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

<form class="flex-container box1" [formGroup]="inputForm" (ngSubmit)="onShow()">
  <div id="grid" class="grid auto-fill form-control">
    <div>Text:</div>

    <div class="box3">
      <select class="form-control box3" formControlName="versionControl"  (change)="changeWebsite($event)">
        <option disabled>Text1</option>
                <option>Text1</option>
                <option *ngFor="let ver of Versions">{{ver.itemName}}</option>
      </select>
      
        <div *ngIf="f.versionControl?.invalid" class="alert alert-danger">
                <div *ngIf="f.versionControl.errors?.required">Version is required.</div>
            </div>      
    </div>
   

    <div>2:</div>
    <div class="box3">
      <select formControlName="someDataControl">
        <option value="" disabled>Text2</option>
        <option *ngFor="let data of SomeData1" [ngValue]="state">
          {{ data }}
        </option>
      </select>
    </div>

    <div>
      <p>Text3</p>
    </div>
    <div>
      <input type="radio" formControlName="someControl3" value="True" /> True<br />
      <input type="radio" formControlName="someControl3" value="False" /> False<br />
    </div>
    <div>
      <p>Text4</p>
    </div>
    <div>
      <select formControlName="someControl4">
        <option value="" disabled>
          Text5
        </option>
        <option
          *ngFor="let data of SomeData4"
          [ngValue]="data"
        >
          {{ data.itemName }}
        </option>
      </select>
    </div>

    <div>
      <p>Text</p>
    </div>
    <div>
      <select formControlName="somwControl5">
        <option value="" disabled>Select</option>
        <option *ngFor="let data of SomeData5" [ngValue]="data">
          {{ data.itemName }}
        </option>
      </select>
    </div>
    <div>
      <p>Text</p>
    </div>
    <div>
      <input type="radio" formControlName="someControl6" value="True" /> True<br />
      <input type="radio" formControlName="someControl6" value="False" /> False<br />
    </div>
  </div>
  <div>
    <p style="text-align: center">     
       <button class="btn btn-primary" type="submit" [disabled]="inputForm.invalid">Show</button>   
    </p>
  </div>
</form>

I do not understand, but button 'Show' is disabled every time even i select dropdown item at 'Version'.

How to fix that? I want if user select dropdown item - button enables.

Answer 1

Here answer:

 <div>
            <mat-select multiple class="form-control box3" 
         formControlName="someControl" (change)="changeSome($event)">
                <mat-option disabled>Select Some</mat-option>
                <mat-option [value]="0">Select All</mat-option>
                <mat-option *ngFor="let data of SomeData" [value]="data">{{ data }}</mat-option>
            </mat-select>

            <div *ngIf="
        inputForm.controls['someControl']?.invalid &&
        inputForm.controls['someControl'].touched
      " class="alert alert-danger">
                <div>Select SomeThing</div>
            </div>
        </div>