Как сделать выпадающий список необходимого в угловом материале?

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>

Но его не работает.

Так как сделать раскрывающийся список обязательным? Спасибо

Для DatePicker это работает. Если я сделаю это:

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

Редактировать: -

Я видел ваши комментарии выше после редактирования. Вместо того, чтобы использовать селектор css (# statusSelect.value), вы можете напрямую проверить по объекту, который вы привязываете к [(ngModel)], то есть «selectedValue»

Answer 2

Самый правильный способ - создать шаблонную форму. Но вы можете привязать раскрывающийся список к ссылочной переменной шаблона без использования form.

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

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

Answer 3

Вы, кажется, довольно близко. API-секция для компонента Select на странице Angular Material предлагает ввод required: boolean. Изменение:

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

на

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

может быть тем, что вы хотели?