Select control binding doesn't working in Angular 8

Question

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!

Nidhin Joseph · Accepted Answer · 2020-02-26 00:40:47Z

1

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>

answered Feb 26, 2020 at 0:40

Nidhin Joseph

10.3k4 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Aguirre Over a year ago

Than you Joseph! besides what you told me, the right property is [value]="industry.id" . I can fixit with you reply! thanks a lot!

Collectives™ on Stack Overflow

Select control binding doesn't working in Angular 8

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related