Material button value pass a whole object

[trim lance]

Hey guys so I had this working where I just pass the location.address and I read it in the OrderLoc now I am trying to do a whole location object such as value={{location}} but something is going wrong because I think the object end's up being empty as at a later time when I try to do OrderLoc.address I am getting undefined

<h3 *ngIf="!locations">You have no route assigned for today.</h3>
  <mat-radio-group  [(ngModel)]="OrderLoc"  (ngModelChange)="emitAddress()" color="primary" aria-label="Select an option">
<mat-card   *ngFor="let location of locations"  style="cursor: pointer;"  fxLayoutAlign="start center" style="cursor: pointer;margin-bottom: 20px;">
    <mat-radio-button  (click)='selected()' value={{location.address}}>
      <div mat-line>{{location.name}}</div>
      <div mat-line> {{location.address}} </div>
      <div mat-line> {{location.postcode}} </div>
    </mat-radio-button>
  </mat-card>
  </mat-radio-group>

Example with the whole object passed into value

<h3 *ngIf="!locations">You have no route assigned for today.</h3>
<mat-radio-group [(ngModel)]="OrderLoc" (ngModelChange)="emitAddress()" color="primary" aria-label="Select an option">
<mat-card *ngFor="let location of locations" style="cursor: pointer;" fxLayoutAlign="start center" style="cursor: pointer;margin-bottom: 20px;">
<mat-radio-button (click)='selected()' value={{location}}>
<div mat-line>{{location.name}}</div>
<div mat-line> {{location.address}} </div>
<div mat-line> {{location.postcode}} </div>
</mat-radio-button>
</mat-card>
</mat-radio-group>

[native depot]

value="{{ location }}" is a string value
[value]="location" is whatever the type of location is, so if location is an Object, then the value is an Object.

[trim lance]

(click)='selected(location)' I did this in the meantime

kinda simplified other code as well further down the line

but let me try what you said ill learn something

yeah thats nice

I wonder which is better option now ngModelChange or (click) on radio button

I wonder if either of them has disatvantages

[native depot]

If you are using Angular forms, don't use value nor [value]. (click)="selected(location)" would be fine on a <button> not on an <input, <select, or other form field IMPO

[trim lance]

I guess in those situations you use OnBlur I did that with a comment field when I wanted to emit it

[native depot]

No, mostly you use Angular Forms 🙂

Or even better use https://formly.dev/ Which I strongly recommend for any Angular Form more complicated than 3 fields.

[trim lance]

Alright Rob, that will be for sure incorporated in the next project!