下拉列表的验证不起作用（按钮无法启用）

Question

我尝试制作简单的输入表单并想要进行验证（当下拉 selected - 按钮必须启用和禁用，否则）。

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>

我不明白，但按钮 'Show' 每次都被禁用，即使 select 下拉项位于 'Version'。

如何解决？我想要用户 select 下拉项 - 按钮启用。

Answer 1

这里回答：

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

下拉列表的验证不起作用（按钮无法启用）

Validation of dropdown not working (button not enables)

javascript

html

angular

typescript

angular-validation