时间戳

首页 > 解决方案 > Mat输入值与显示文本

angular-material - Mat输入值与显示文本

问题描述

我有一些垫子选择和自动完成，它们都采用一个对象并显示一个值，但是当我将表单发布到服务器时，它会发送一个不同的值。我试图用普通的垫子输入来完成同样的事情，但我没有看到一种方法来设置值和以不同的方式显示文本。我目前有这样的输入：

<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

标签： angular-material

解决方案

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

对我有用的技巧是在 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>

打字稿文件

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

推荐阅读