Angular 下拉列表验证

Question

我是初学者 Angular

如果未选择下拉列表，我有一个添加验证的任务我必须隐藏按钮

这是代码

按钮功能

<input type="file" class="custom-file-input" multiple (change)="onDealPriceFileChangeHandler($event)" accept=".xlsx"   />

下拉列表代码

<div class="form-group">
   <label class="label" for="nights">Number of Nights</label>

   <nb-select fullWidth  placeholder="Select Number of Nights" >

 <nb-option *ngFor="let night of nights" [value]="night.value"
  (selectionChange)="nightHanlder(night.value)">{{night.name}}
  </nb-option>

 </nb-select>

 </div>

夜阵

nights = [
      { value: 1, name: '1 Night' },
      { value: 2, name: '2 Nights' },
      { value: 3, name: '3 Nights' },
]

夜更功能

nightHanlder(code){
   
this.selectNight=code;
}

I need to add an alert if dropdown is not selected

Answer 1

<div *ngIf="!(selectNight==0 || selectNight==null)">

 <input type="file" class="custom-file-input" multiple (change)="onDealPriceFileChangeHandler($event)" accept=".xlsx" /> 

</div>

加载时按钮不可见

如果您 select 下拉按钮将可见

显示警报

 <div *ngIf="selectedNight==0 ||selectedNight==null">

   <div class="alert alert-danger">

     <strong>Select Number of Nights to Update PriceList </strong>

   </div>

 </div>

Angular 下拉列表验证

Angular Dropdown list validation

angular

angular-reactive-forms