javascript - 如何在 Angular Material 中制作所需的下拉列表？

Question

我有一个带有 Angular Material 的搜索“形式”。但它不是带有提交按钮的表单。但只是一个按钮。像这样:

  <button mat-raised-button color="accent" class="Button" (click)="searchFor()">Filter</button>

我有一个下拉列表。但我想让下拉列表成为必需的。

像这样:

 <div class="search-select searchstatus" *ngIf="selectedSearch && hasStatusOptions(selectedSearch)">
        <mat-select placeholder="Status" name="option"  [(ngModel)]="selectedValue" required>
          <mat-option *ngFor="let option of getStatusOptions(selectedSearch)"  [value]="option.apiStatus">
            {{ option.status }}
          </mat-option>
        </mat-select>
      </div>

但是他的不起作用。

那么如何使下拉列表成为必需的呢？谢谢

对于日期选择器它有效。如果我这样做:

   <input matInput readonly required [matDatepicker]="picker1" placeholder="start datum" [(ngModel)]="startDate" />

如果没有输入日期，标签会变成红色，并显示*

如果我这样做:

   <mat-select  #statusSelect placeholder="Status" name="option"  [(ngModel)]="selectedValue" [required]="true" >

还有这个:

   <button [disabled] = '!statusSelect.value' mat-raised-button color="accent" class="Button" (click)="searchFor()">Filter</button>

我收到此错误:

ExtendedSearchComponent.html:62 ERROR TypeError: Cannot read property 'value' of undefined

Answer 1

根据提供的信息，我猜测您希望从下拉列表中选择一个值，并据此进行过滤。因此，您可以禁用过滤器，直到在下拉列表中选择一个值。也许是这样的。

<div>
    <mat-select placeholder="Status" name="option"  [(ngModel)]="selectedValue" required>
       <mat-option></mat-option>
       <mat-option *ngFor="let option of tableDef"  [value]="option">
            {{ option.header }}
       </mat-option>
       </mat-select>
 </div>

<button mat-raised-button color="accent" class="Button" (click)="searchFor()" [disabled]="!selectedValue">Filter</button>

编辑:-

编辑后我在上面看到了您的评论。您可以直接通过绑定(bind)到 [(ngModel)] 的对象进行检查，即“selectedValue”

，而不是使用 css 选择器 (#statusSelect.value)