CODEWITHSUNDEEP
angular
cucuru
cucuru

Reputation: 3708

mat-select value with space is not working

I think it's a small mistake, but I'm not able to find it.

I have this form:

<mat-card>
   <form #f="ngForm">

      <mat-card-content>

        <mat-form-field>
         <mat-select [ngModel]="data.variable" name="variable">
          <ng-container *ngFor="let variable of list;">
            <mat-option [value]="variable.id">{{variable.name}}</mat-option>
          </ng-container>
         </mat-select>
        </mat-form-field>

      </mat-card-content>

      <mat-card-actions>

         <button [disabled]="!f.valid" (click) = "addItem(f.value)">
         </button>

      </mat-card-actions>     

   </form>
</mat-card>

list has as id a string with a space, for example "VAR VARIABLE1"

and this is my problem, when I click in button, the value for variable is just "VAR" instead of "VAR VARIABLE1", why are not the complete id?

Upvotes: 1

Views: 2742

Answers (1)

Shohel
Shohel

Reputation: 3934

Try to use:

<mat-form-field>
    <mat-select [(value)]="data.variable" name="variable">
        <ng-container *ngFor="let variable of foods;">
            <mat-option [value]="variable.id">{{variable.name}}</mat-option>
        </ng-container>
    </mat-select>
</mat-form-field>

OR

<mat-form-field>
    <mat-select [(ngModel)]="data.variable" name="variable">
        <ng-container *ngFor="let variable of foods;">
            <mat-option [value]="variable.id">{{variable.name}}</mat-option>
        </ng-container>
    </mat-select>
</mat-form-field>

Binding the value in your template.

value="{{ variable.id }}"

OR

[value]="variable.id"

And selected value use ngModel instead of value.

<mat-select [(value)]="data.variable">

should be

<mat-select [(ngModel)]="data.variable">

Upvotes: 1

Related Questions