Отображать разные данные в поле ввода вместо значения в Angular6

Question

Я использую материал и форму в компоненте в angular 6.

 <mat-form-field>
        <input matInput [matAutocomplete]="auto" [formControl]="autoForm"
          formControlName="formg">
        <mat-autocomplete #auto="matAutocomplete" panelWidth="200">
          <mat-option *ngFor="let val of list | async" [value]="val.code"
            (onSelectionChange)="changed($event)">
            <span>{{val.code}} - {{val.name}}</span>
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

Теперь значение, отображаемое в текстовом поле, является только кодовым номером. Я хотел бы отобразить его как "val.code-val.name". Должны ли мы сделать это из html самого? без изменения значений формы? заранее спасибо