Question

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

  <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

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

[Pipeline] withDockerRegistry
14:53:32  $ docker exec --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** --env ******** 9a2be9d46c2f9961d1852d2322e64a20a1b4bade1c55d297f4f1d2d2943cc7b4 docker login -u admin -p ******** https://xxxxx
14:53:34  OCI runtime exec failed: exec failed: container_linux.go:345: starting container process caused "exec: \"docker\": executable file not found in $PATH": unknown
[Pipeline] // withDockerRegistry
[Pipeline] }
[Pipeline] // stage
[Pipeline] }
[Pipeline] // timestamps
[Pipeline] }
[Pipeline] // withEnv
[Pipeline] }
$ docker stop --time=1 9a2be9d46c2f9961d1852d2322e64a20a1b4bade1c55d297f4f1d2d2943cc7b4
$ docker rm -f 9a2be9d46c2f9961d1852d2322e64a20a1b4bade1c55d297f4f1d2d2943cc7b4
[Pipeline] // withDockerContainer
[Pipeline] }
[Pipeline] // node
[Pipeline] End of Pipeline
ERROR: docker login failed
Finished: FAILURE

编辑：-

修改后，我在上面看到了您的评论。除了使用CSS选择器（＃statusSelect.value），您还可以直接检查要绑定到[[ngModel）]的对象，即“ selectedValue”

Answer 2

您似乎很近。 “角材料”页面上的 Select 组件的API Section提供了一个required: boolean输入。更改：

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

到

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

可能是您想要的吗？

Answer 3

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

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

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

如何制作角形材料所需的下拉列表？

3 个答案: