Реактивные формы выбранная опция — объект Object в formcontrol

#javascript #angular

#javascript #угловой

Вопрос:

В моем компоненте у меня есть следующее хранилище элементов :

 stores : Store[]
  

Хранилище — это следующий интерфейс:

 export interface Store{
  store_name: string;
  owner: string;
  display_name?: string;
}
  

У меня есть следующий выбор в моем html :

   <select [formControlName]="stores" >
    <option value="null" hidden selected>Select</option>
    <ng-container *ngIf="selectedProduct">
        <option *ngFor="let store of stores" [value]="store">
            {{ store.display_name }}
        </option>
      </ng-container>
    </select>
  

Этот выбор связан со следующим FormControl :

  constructor(......) {
    this.fg= new FormGroup({
      ....
      stores: new FormControl(null, [Validators.required]), 
      ...
    });
  

почему в моем методе onSubmit я получаю undefined при попытке получить доступ к полям выбранного хранилища? :

 onSubmit(){
    console.log(this.fg.get("stores").value.store_name); // undefined
     .....
}
  

кстати: использование angular 10.

Комментарии:

1. Использовать [ngValue] вместо [value] ?

2. @JasonWhite это сработало, можете ли вы объяснить, почему? Я понял разницу, погуглив, tnx 🙂 Единственное различие между ними заключается в том, что значение всегда является строкой, где в ngValue вы можете передать object

3. [value] всегда является строкой, если вы хотите привязать объект, который вам нужно использовать [ngValue] .