Как сохранить отображаемое значение mat-select - PullRequest
Новая
       11

Как сохранить отображаемое значение mat-select

1 голос
/ 02 октября 2019

Я хочу сохранить supName.compName в variable из файла html в файл машинописи, дополнительный к supName.$key

<mat-form-field>
  <mat-select formControlName="supName" placeholder="Company">
    <mat-option>None</mat-option>
    <ng-container *ngFor="let supName of array">
      <mat-option value="{{supName.$key}}">{{supName.compName}}</mat-option>
    </ng-container>
  </mat-select>
</mat-form-field>

Ответы [ 2 ]

3 голосов
/ 02 октября 2019

Поскольку у вас есть formControlName в поле mat-form, можно с уверенностью предположить, что вы используете реактивную форму.

Итак, вы бы создали форму, вероятно, так:

form = new FormGroup({
  supName: new FormControl(),
  ...
});

Теперь, какое бы значение вы не указали в атрибуте value в этой строке: 

<mat-option value="{{supName.$key}}">{{supName.compName}}</mat-option>

Будет установлено в form s value какsupName свойство.

На данный момент вы устанавливаете supName.$key как value. Если вы хотите установить supName.compName, вы можете сделать это тоже. 

<mat-option value="{{supName.compName}}">{{supName.compName}}</mat-option>

Вот Sample StackBlitz для вашей ссылки.

Посмотрите на метод onSubmit и что он регистрирует.

0 голосов
/ 02 октября 2019

Поскольку вы хотите сохранить несколько свойств для этого form control, вы можете сохранить полное значение object следующим образом: 

<mat-form-field>
  <mat-select formControlName="supName" placeholder="Company">
    <mat-option>None</mat-option>
      <ng-container *ngFor="let supName of array">
        <mat-option [value]="supName" <!-- HERE ->>{{ supName.compName }}</mat-option>
      </ng-container>
  </mat-select>
</mat-form-field>

DEMO

...