验证下拉列表不起作用按钮未启用

如何解决验证下拉列表不起作用按钮未启用

我尝试制作简单的输入表单并希望进行验证（选择下拉菜单时 - 必须启用和禁用按钮，否则）。

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('',somwControl5: new FormControl('',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,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>

我不明白，但即使我在“版本”中选择下拉项，每次“显示”按钮也会被禁用。

如何解决？ 我想如果用户选择下拉项 - 按钮启用。

解决方法

这里回答：

 <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>