Установить отображаемое поле ввода текста, отличное от фактического значения

Question

Пример:

const obj = {name:"abc", value:"20"};

Необходимо установить значение 20, но для отображения пользователю abc.

Answer 1

Вам не нужно публиковать на сервере те же данные, которые видит пользователь.С помощью Angular вы можете сохранять структуры данных, которые не зависят от представления, и отправлять их на сервер.

Например, вы можете определить интерфейс продукта следующим образом:

export interface Product {
  id: number;
  productName: string;
  productCode: string;
  category: string;
  categoryId: number;
}

ПользовательИнтерфейс может разрешить отображение / ввод категории, но структура данных может сохранить значение как categoryId.Затем вы можете передать только categoryId обратно на сервер.

Answer 2

Одна вещь - это то, что вы видите, а другая - то, что вы отправляете.Некоторым нравится (это глупый пример)

<form (ngSubmit)="onSubmit()">
  <input [(ngModel)]="user">
</form>

const obj = [{name:"abc", value:"20"},{name:"def", value:"30"}];
user:any;
ngOnInit()
{
     this.user=dataToForm(20);
}
onSubmit()
{
   let data=this.formToData(this.user);
   console.log(data);
}

//we received real data and transform to display data
dataToForm(data:any)
{
   let item=obj.find(x=>x.value==data);
   return item?item.name:null
}

//we received display data and transform to real data
formToData(dataForm:any)
{
   let item=obj.find(x=>x.name==dataForm);
   return item?item.value:null

}

Answer 3

Вы можете использовать меню select:

<select>
    <option value="20">abc</option>
    <option value="100">xyz</option>
</select>

Тогда пользователь может выбрать abc , но вы получите значение 20 .