Считать значение выбранного параметра в Компоненте

Question

Используя Angular7 CLI, я пытаюсь прочитать значение mat-select, к которому прикреплен FormControl к FormGroup.При чтении значения - оно показывает значение в [object object]

В соответствии с одним решением, я добавил [(value)]="selectedOption".Но это не соответствует официальным документам

Код компонента

purposeControl = new FormControl('', [Validators.required]);
purposeList: Purpose[] = [
    {id: '0', value: 'Self Care'},
    {id: '1', value: 'Caring for someone'},
];

validateVitalsFormGroup = new FormGroup({
  purposeControl: this.purposeControl,});

---

Реализована кнопка «Отправить» для отправки данных

Вернуться к компоненту:

onFormSubmit(): void {
  console.log('Purpose:' + 
this.validateVitalsFormGroup.get('purposeControl').value);
}

HTML-код:

<mat-form-field>
    <mat-select [(value)]="selectedOption" placeholder="Purpose" [formControl]="purposeControl" required >
        <mat-option>--</mat-option>
        <mat-option *ngFor="let purpose of purposeList" [value]="purpose">{{purpose.value}} </mat-option>
    </mat-select>
    <mat-error *ngIf="purposeControl.hasError('required')"> Please choose a Purpose</mat-error>
    <mat-hint>{{purposeControl.value?.value}}</mat-hint>
</mat-form-field>

Ожидаемый идентификатор значения, выбранный в HTML, или 0 ИЛИ 1.

Answer 1

В качестве значения для выбора вы должны определить target.id вместо простого purpose, поскольку purpose является объектом.

  <mat-option *ngFor="let purpose of purposeList" [value]="purpose.id"> //HERE USE purpose.id if you wanna to use Id as a value;
    {{purpose.value}} 
  </mat-option>

Чем вы можете использовать:

onFormSubmit(): void {
  console.log('Purpose:' + 
  this.validateVitalsFormGroup.get('purposeControl').value);
}

Илиесли вы хотите использовать объект цели как целое значение, вы должны:

 onFormSubmit(): void {
  console.log('Purpose:' + 
  this.validateVitalsFormGroup.get('purposeControl').value.id);
  this.validateVitalsFormGroup.get('purposeControl').value.value);
}