如果 formControlName 值与选项值不匹配，如何显示选择的选项？

Question

我有一个 material 下拉列表，用于填充客户名称列表。一切正常，但刚刚在测试时发现了一个错误。

这个错误看似很小，但会在很大程度上影响流程。让我详细说明一下情况：有一个客户信息面板（在管理面板中），我正在其中对客户名称进行 CRUD。从那里通过 API 名称数组正在填充下拉列表。

在提交表单时，名称提交为 XYZ，然后如果我从管理员端删除此名称并且我从表单中查看名称未显示在下拉列表中，即文静自然但名字停留在formControlName.

现在是我需要在下拉列表中显示选中的 formControlName 数据的场景，即使选项中不存在数据（当数据存在于选项值中时工作正常）。

这是我当前的代码：

<mat-form-field appearance="outline">
  <mat-label>Customer Name</mat-label>
  <mat-select formControlName="customerName" (selectionChange)="custData($event)">
    <mat-option *ngFor="let customer of customerNames" [value]="customer.customerName">
      {{customer.customerName}}
    </mat-option>
  </mat-select>
  <mat-error>Customer Name Required</mat-error>
</mat-form-field>

我需要提供什么额外条件才能解决这个问题？

这是同样的问题example。

Answer 1

当您从服务器获取数据并且还想在删除选项后显示 selected 名称时。在这种情况下，您可以使用 mat-autocomplete.

我已经为 example

更新了您的代码

或者

您可以使用只读输入来显示formControlName。在selection之后，需要隐藏select字段，将数据与输入字段绑定。此外，在输入字段上添加一个点击事件以隐藏输入并显示 select.

Answer 2

只需添加一个新选项

    <select formControlName="option">
        <option *ngIf="optionList.indexOf(form.get('option').value)<0" 
             hidden [value]="form.get('option').value">
             {{form.get('option').value}}</option>
    
         <option *ngFor="let opt of optionList" [value]="opt">{{opt}}</option>
    </select>

我添加了“隐藏”所以它不可选

已更新 如果我们有一个复杂的选项是可能的，我们需要使用辅助 getter（在这种情况下我直接使用 FormControl，如果 tecnica 是相同的使用 FormGroup，只记得我们应该使用 myForm.get('nameOfControl')

  get includeValue()
  {
    return this.foods.map(x=>x.value).indexOf(this.control.value)<0
  }

<mat-form-field appearance="fill">
  <mat-label>Favorite food</mat-label>
  <mat-select [formControl]="control">
    <mat-option *ngIf="includeValue" style="display:none" [value]="control.value">{{control.value}}</mat-option>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

见stackblitz

如果 formControlName 值与选项值不匹配，如何显示选择的选项？

How to show an option selected if formControlName values doesnot matches option value?

javascript

typescript

angular-material

angular

angular9