Блог

У меня есть форма, в которой пользователь может обновлять информацию о пользователе. Я хотел бы изменить формат html таким образом, чтобы вместо того, чтобы пользователь мог вводить строку, он должен выбирать из выпадающего меню выбор опций. У меня есть общая идея для этого, но я застрял на привязке данных. В исходной форме, где пользователь вводил бы в состояние, из которого они происходят, у меня есть следующий код.

           <mat-form-field>

                    <input matInput type="text" id="user_state" name="user_state" 
                     placeholder="SC" [(ngModel)]="user.user_state" required>

          </mat-form-field>
  

Я понимаю, что я использую привязку данных с директивой ngModel, как мне преобразовать это в формат select options, а затем отправить данные, выбранные пользователем, в серверную часть?

Официальную документацию Angular для выпадающих списков вы можете найти здесь . Как я уже сказал, вам нужен массив для отображения данных.

Например, так.

 export class AppComponent  {

  constructor() {}
  
  countries: any = [
    {
      full: "Great Britain",
      short: "GB"
    },
    {
      full: "United States",
      short: "US"
    },
    {
      full: "Canada",
      short: "CA"
    }
  ];
  selectedCountry: string = "GB";
  
  selectedCountryControl = new FormControl(this.selectedCountry);

}
  

Это HTML.

Примеры Angular Material — mat-select

 <div style="padding: 20px;">
<h1>Model Forms</h1>

<div style="padding: 0 0 20px 20px">
<h3>Value string</h3>

<mat-form-field>
  <mat-select
    name="countryString"
    [(value)]="selectedCountry"
    placeholder="Country"
  >
    <mat-option [value]="'GB'">Great Britain</mat-option>
    <mat-option [value]="'US'">United States</mat-option>
    <mat-option [value]="'CA'">Canada</mat-option>
  </mat-select>
</mat-form-field>

amp;nbsp;amp;nbsp; Selected = {{selectedCountry}}
</div>
</div>
  

Для получения дополнительной информации у вас есть это stackblitz здесь.
https://stackblitz.com/edit/angular-material-select-demo-nhweaq