Support for setting option's control value to be a property of object and option's display value to be another property of the object

I know that if we want the option's control value (what is saved in the form) to be different than the option's display value (what is displayed in the text field), we'll need to set the **displayWith** property on our autocomplete element. as explained here:

https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values

Suppose we have a user object like `{ id: 1, name: 'Abc' }`.

What if we want the option's control value (what is saved in the form) to be **user.id** and option's display value (what is displayed in the actual text field) to be **user.name**?

In my case I want to display a list of users in autocomplete options and when user selects a user, I want to display the selected user name on the user screen but when the form is submitted, I just want user.id to be posted to the server not user.name and not complete user object.

Bắt đầu với tài liệu autocomplete của Angular Material được liên kết, đặc biệt là phần về việc thiết lập các giá trị riêng biệt cho control và display, rồi so sánh với ví dụ user object trong issue. Hoàn thành khi autocomplete có thể hiển thị user.name sau khi chọn, đồng thời gửi user.id thay vì tên hoặc toàn bộ object.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.