Angular 6：将 select 框值的选定值传递给 ngSubmit 上的组件

Question

I am using Angular 6 along with angular material and i have the form as below

 <form (ngSubmit)="addDetails(line.value, menu.value)" [formGroup]="addMealForm">
 <mat-card class="mb-5 float-right w-100">
   <mat-form-field class="ml-5 mr-5 w-25">
     <mat-label>Menu</mat-label>
     <mat-select>
       <mat-option #menu *ngFor="let menu of menus" [value]="menu.value">
         {{menu.viewValue}}
       </mat-option>
     </mat-select>
   </mat-form-field>

   <mat-form-field  class="ml-5 mr-5 w-25">
     <mat-label>line</mat-label>
     <mat-select>
       <mat-option #line *ngFor="let line of lines" [value]="line.value">
         {{line.viewValue}}
       </mat-option>
     </mat-select>
   </mat-form-field>
   <button type="submit" mat-raised-button color="accent">
     <mat-icon>add</mat-icon>
     Add Meal
   </button>
   </mat-card>
 </form>

I am trying to send the selected values from the dropdown to my component like below

addDetails(line,menu) {
 console.log(line);
 console.log(menu);
}

for some reason i am not able to do this. i am getting the below error

TypeError: Cannot read property 'value' of undefined

Can someone tell me why this is happening

Answer 1

I'm assuming it's because your sending #line (which is the template-variable of the many mat-options) as opposed to sending the actual value of the mat-select.

I would try:

<form (ngSubmit)="addDetails(selectLine.value, selectMenu.value)" 
  [formGroup]="addMealForm">
  <mat-card class="mb-5 float-right w-100">
    <mat-form-field class="ml-5 mr-5 w-25">
      <mat-label>Menu</mat-label>
      <mat-select #selectMenu>
        <mat-option #menu *ngFor="let menu of menus" [value]="menu.value">
          {{menu.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field  class="ml-5 mr-5 w-25">
      <mat-label>line</mat-label>
      <mat-select #selectLine>
        <mat-option #line *ngFor="let line of lines" [value]="line.value">
          {{line.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <button type="submit" mat-raised-button color="accent">
      <mat-icon>add</mat-icon>
      Add Meal
    </button>
  </mat-card>
</form>