Question

我想使用自动完成输入进行搜索，但是自动完成结果未绑定在表单输入搜索按钮上。尽管我给出了一些自动完成结果（输入按钮仍处于禁用状态），但输入文本看起来还是原始的。

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

我希望我可以使用自动完成输入进行搜索。输入一些文本后，搜索按钮应该可以激活，我可以搜索文本。

Answer 1

输入的原始状态没有改变，因为您的输入上有两个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>

Example

自动完成输入涵盖常规表单输入。如何使用自动完成输入提交表单

1 个答案: