CODEWITHSUNDEEP
angularselectbindingangular-materialangular8
Martin Aguirre
Martin Aguirre

Reputation: 23

Select control binding doesn't working in Angular 8

After check few replies, I'm here to make this question because I'm having some troubles with the binding of an "mat-select" input.

this is the code in the component.ts file

  selectedIndustry : any;  
  constructor(private industrysectorService: IndustrySectorService, private _formBuilder: FormBuilder) {}

  ngOnInit() {

    this.industrysectorService.get().subscribe((response: IResponse<IIndustrySector[]>) => {
      if (response.isSuccessful) {
        this.industries = response.result.list;        
      } else {
        this.industries = [];        
      }
    });

    this.selectedIndustry = this.industries[0];

and this in the componente.html file.

<mat-label>Industry Sector</mat-label>
      <mat-select required type="number" [(ngModel)]="selectedIndustry" [ngModelOptions]="{standalone: true}">
        <option *ngFor="let industry of industries" [ngValue]="industry.id">{{industry.industrySectorName}}</option>   
    </mat-select>

the error message in the console is:

EngagementDetailsComponent.html:43 ERROR Error: Cannot find control with unspecified name attribute
at _throwError (forms.js:3357)
at setUpControl (forms.js:3181)
at FormControlDirective.ngOnChanges (forms.js:7102)
at checkAndUpdateDirectiveInline (core.js:31906)
at checkAndUpdateNodeInline (core.js:44367)
at checkAndUpdateNode (core.js:44306)
at debugCheckAndUpdateNode (core.js:45328)
at debugCheckDirectivesFn (core.js:45271)
at Object.eval [as updateDirectives] (EngagementDetailsComponent.html:48)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)

and the data bingind doesn't work. the variables: "selectedIndustry" and "industries" was filled correctly from the DB. I checked this example but i can't figurate where is the issue. Thanks!

enter image description here

Upvotes: 1

Views: 75

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

You are mixing mat-select and normal select. Please use mat-option with [value] attribute binding instead. More Info

<mat-select>
    <mat-option *ngFor="let food of foods" [value]="food">
      {{food}}
    </mat-option>
  </mat-select>

Upvotes: 1

Related Questions