CODEWITHSUNDEEP
angularangular-material
mahsa yadegari
mahsa yadegari

Reputation: 77

mat-select value doesn't work with formControlName

I am using mat-select ,I need to set default value for it. It works but After adding formControlName to it, its default value is not displayed.

I tried [(ngModel)] and [(value)] , and "mat-autocomplete"

<mat-form-field>
 <mat-select placeholder="پیش نمایش" 
   formControlName="lesson" 
     [value]="free_demo"
      (selectionChange)="onSelectDemo(i)">
      <mat-option [value]="demo.id"
       *ngFor="let demo of demos[i]">
        {{ demo.title }}
       </mat-option>
   </mat-select>

Upvotes: 6

Views: 34459

Answers (5)

eta32carinae
eta32carinae

Reputation: 631

One reason for this issue could be an incompatibility in the type of values that you are using in mat-option's value and the value that you are setting for its formControlName. For example, I used form builder group like this:

return this.formBuilder.group({
    car_select: { value: "SOME VALUE WHICH IS IN STRING!", disabled: false },
});

and in the html:

<mat-select formControlName="car_select">
    <mat-option *ngFor="let car of cars" [value]="car.id.toString()">
        {{car.name}}
    </mat-option>
</mat-select>

the value in mat-option accepts any type, so you need to make sure that you are passing the correct type which is string, in this case.

Upvotes: 1

Seega
Seega

Reputation: 3400

I had the same problem. Make sure to update your components module with the correct import of MatSelectModule.

import {MatSelectModule} from '@angular/material/select';

@NgModule({
  imports: [
    ....
    MatSelectModule,
  ],
}

Unfortunetly, the error message is not really self-explaining.

Upvotes: 3

Mehdi Shakeri
Mehdi Shakeri

Reputation: 622

When you don't use formControlName and set the static [value] as default it becomes a completely different scenario and the mat-select is no longer a member of the form and you just set the value manually, so formControlName does nothing but syncs a FormControl in an existing FormGroup to a form control element by name, if you define default value in constructor of FromControl but nothing happened so you have to check the type of comparison of the default value and the values ​​that you defined as value for every mat-option because mat-select uses its own ControlValueAccessor or you can implement your own by passing a function to [compareWith] input. (پیش نمایش؟؟ :))

Upvotes: 1

wentjun
wentjun

Reputation: 42566

When it comes to using reactive forms, I would recommend you to set/update your FormControl by using the setValue() or patchValue() methods. You may read up more about it over here.

This is one way you can update your form values using patchValue. Assuming the object has a id of 1,

this.editProductForm.patchvalue({
  sub_products: [{
    lesson: '1'
  }]
});

On your component.ts,

<mat-form-field>
 <mat-select placeholder="پیش نمایش" 
   formControlName="lesson" 
   (selectionChange)="onSelectDemo(i)">
   <mat-option [value]="demo.id" *ngFor="let demo of demos[i]">
     {{ demo.title }}
   </mat-option>
 </mat-select>
</mat-form-field>

Upvotes: 2

Atul Stha
Atul Stha

Reputation: 1524

If you are using "formControlName" you can access the controller in the TS file and set value like:

this.yourFormName.controls['lesson'].setValue('your value or' + this.dynamicValue )

Upvotes: 2

Related Questions