Question

我有一些选择和自动完成功能，它们都带有一个对象并显示一个值，但是当我将表单发布到服务器时，它将发送一个不同的值。我正在尝试通过普通的垫子输入来实现相同的目的，但是我看不到设置值和以不同方式显示文本的方法。我目前有这样的输入：

<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input matInput type="text" formControlName="name">
</mat-form-field>

我希望输入接受这样的对象：

person= {
userName = 'testname1',
firstName = 'John',
lastName = 'Smith'
}

，并在文本框中显示person.firstName +''+ person.lastName，但输入值应为person.userName

Answer 1

我还尝试过将值和显示的文本设置为不同的方式，但是没有成功。

对我有用的技巧是在TypeScript文件中添加一个新变量，并在输入中添加一个'onSelectionChange（）'事件。这样，当下拉列表中的值发生更改时，用户会看到它，但还会调用添加的事件，在该事件中，我将服务器所需的期望值传递到新变量中。

最后，在从服务器发出请求之前，我将所需的值放置在所示的位置，以便服务器获得所需的正确格式。

HTML文件

<mat-autocomplete #auto="matAutocomplete">
   <mat-option
      *ngFor="let sample of samples$ | async"
      [value]="sample.name"
      (onSelectionChange)="setVariable(sample.id)"
   >
      {{ sample.name }}
   </mat-option>

TypeScript文件

onSubmit() {
   this.sampleFormGroup.desiredValue = sample.id;
   // Server request
}

垫输入值与显示文本

1 个答案: