如何在角度材料中制作所需的下拉列表？答案

【问题标题】：How to make dropdownlist required in angular material?如何在角度材料中制作所需的下拉列表？
【发布时间】：2019-10-16 09:20:57
【问题描述】：

我有一个带有棱角材料的搜索“表格”。但它不是带有提交按钮的表单。但只是一个按钮。像这样：

  <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

【问题讨论】：

标签： javascript angular validation angular-material dropdown

【解决方案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>

编辑：-

编辑后我在上面看到了您的 cmets。除了使用 css 选择器（#statusSelect.value），您可以直接通过绑定到 [(ngModel)] 的对象进行检查，即“selectedValue”

【讨论】：

好的，谢谢。但是你可以在没有 type==submit 的情况下使用 RactiveForm 吗？所以只需 (click)="searchFor()"
没问题。总是乐于助人。 :)

【解决方案2】：

你似乎很接近。 Angular Material 页面上 Select 组件的API Section 提供了required: boolean 输入。改变：

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

到

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

可能是你想要的？

【讨论】：

谢谢。是的，我这样做了：但这不起作用。我仍然可以选择按钮过滤器，而没有任何需要下拉菜单的消息
哦，我可能误会了。因此，只要所需的下拉菜单没有选定的值，您就想禁用该按钮吗？如果是这种情况，您需要参考 vadjs 的答案。如果您有多个必需的下拉菜单，您可能只需要 && 布尔值？例如，`[disabled]="!select1.value && select2.value && ..."

【解决方案3】：

最合适的方法是制作模板驱动的表单。但是您可以将下拉列表绑定到模板引用变量，而无需使用任何 form。

<mat-select #yourSelect></mat-select>

<button [disabled]='!yourSelect.value'>Button</button>

【讨论】：

谢谢。但我有更多需要的下拉菜单。
如果您需要多个下拉菜单，您可以再添加一个条件，例如<button [disabled]='!yourSelect.value || !yourAnotherSelect.value'>Button</button> 但我强烈建议在这种情况下使用表单。
ok，但也许我想错了。但是对于表格，我一直认为您必须提交表格。但这只是一个搜索“表单”，所以没有提交
提交按钮不是必需的。您可以随时使用 form.value。例如：你可以这样使用：form.valueChanges.subscribe(value => sendRequest(value))，每次表单值改变时都会起作用。