Автозаполнение ввода охватывало обычную форму ввода. Как отправить форму с автозаполнением ввода - PullRequest
Новая
       36

Автозаполнение ввода охватывало обычную форму ввода. Как отправить форму с автозаполнением ввода

0 голосов
/ 28 октября 2019

Я хочу выполнить поиск с автозаполнением ввода, но результат автозаполнения не привязывается к кнопке поиска ввода формы. Похоже, что ввод текста нетронут, хотя я дал некоторые результаты автозаполнения (кнопка поиска по-прежнему отключена). 

<form [formGroup]="searchForm">
  <section class="form-block">

    <div class="form-group" id="customerIdFormGroup">
      <label class="required" for="customerIdInput">Customer ID</label>

      <input type="text"
             id="customerIdInput"
             (keyup.enter)="emitSearch()"
             formControlName="customerId"

             matInput
             [formControl]="myControl"
             [matAutocomplete]="auto">

             <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngFor="let option of (filteredOptions | async)" [value]="option">
                {{ option }}
              </mat-option>
            </mat-autocomplete>
    </div>
    <button type="button"
            id="searchButton"
            class="btn btn-primary"
            [disabled]="searchForm.pristine"
            (click)="emitSearch()">
      Search
    </button>
    <button type="reset"
            id="clearButtonInvoice"
            class="btn btn-link text-primary"
            (click)="emitClear()">
      Clear
    </button>
  </section>
</form>

Я использовал угловой материал 7.3.1 с. Если я удаляю часть matInput, кнопка поиска работает хорошо, 

[formControl]="myControl"
[matAutocomplete]="auto"

, но без функции автозаполнения. 

<form [formGroup]="searchForm">
  <section class="form-block">

    <div class="form-group" id="customerIdFormGroup">
      <label class="required" for="customerIdInput">Customer ID</label>

      <input type="text"
         id="customerIdInput"
         (keyup.enter)="emitSearch()"
         formControlName="customerId"

         matInput
         [formControl]="myControl"
         [matAutocomplete]="auto">

         <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let option of (filteredOptions | async)" [value]="option">
            {{ option }}
          </mat-option>
        </mat-autocomplete>
    </div>
    <button type="button"
        id="searchButton"
        class="btn btn-primary"
        [disabled]="searchForm.pristine"
        (click)="emitSearch()">
  Search
    </button>
    <button type="reset"
        id="clearButtonInvoice"
        class="btn btn-link text-primary"
        (click)="emitClear()">
  Clear
    </button>
  </section>
</form>

Я предполагаю, что могу выполнять поиск с автозаполнением ввода. После того, как введен некоторый вводимый текст, предполагается, что кнопка поиска активирована, и я могу искать по тексту.

1 Ответ

0 голосов
/ 28 октября 2019

Первоначальный статус ввода не меняется, так как у вас есть две директивы formControl на входе, удалите [formControl] = "myControl" из элемента ввода. 

<form [formGroup]="searchForm">
  <section class="form-block">
    <div class="form-group" id="customerIdFormGroup">
      <label class="required" for="customerIdInput">Customer ID</label>
      <input type="text"
             id="customerIdInput"
             (keyup.enter)="emitSearch()"
             formControlName="customerId"
             matInput
             [matAutocomplete]="auto">

             <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngFor="let option of (filteredOptions | async)" [value]="option">
                {{ option }}
              </mat-option>
            </mat-autocomplete>
    </div>
    <button type="button"
            id="searchButton"
            class="btn btn-primary"
            [disabled]="searchForm.pristine"
            (click)="emitSearch()">
      Search
    </button>
    <button type="reset"
            id="clearButtonInvoice"
            class="btn btn-link text-primary"
            (click)="emitClear()">
      Clear
    </button>
  </section>
</form>

Пример

...