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

【问题标题】：Autocomplete input covered regular form input. How to submit form with autocomplete input自动完成输入涵盖了常规表单输入。如何使用自动完成输入提交表单
【发布时间】：2020-02-23 22:52:57
【问题描述】：

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

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

我使用 angular materiel 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>

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

【问题讨论】：

导出类 SearchByCustomerIdComponent 实现 OnInit { myControl = new FormControl();选项：字符串[] = ['N3RSRCORP', 'N0KINGKULL', 'N3CACTUS', 'N3RCACORP', 'N4UPS' , 'N4UPSAMER' , 'N4UNISTAR' , 'N4UPS', 'N4UPSTRUCk'];过滤选项：Observable; @Input() 搜索表单：表单组； @Output() searchByCustomerId: EventEmitter = new EventEmitter(); @Output() 清除：EventEmitter = new EventEmitter(); emitSearch() { this.searchByCustomerId.emit(); }

标签： html angular input autocomplete angular-material

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

【讨论】：

[formControl] 在 ts 文件中包含自动完成逻辑和内容。如果我删除它，将不会有自动完成功能。
那个 formControlName 来自常规的 HTML 表单输入，绑定到带有搜索按钮的事件发射器。 [formControl] 来自角度/材质，具有自动完成功能。我不确定我是否可以将它们结合起来。
据我所知，除了formControlName将在formGroup中使用之外，两者都是samd，FormControl可以在没有formGroup的情况下直接使用
问题已解决。我们只需要一个 formControl，然后在 ts 文件中更改 API 路径。谢谢你的帮助:)