Angular Material form issue: angular mat-form-field must contain MatFormFieldControl

Question

I have created a new angular form, that includes both text input and now a select box.

The problem is that when I run the code, I get the error:

mat-form-field must contain a MatFormFieldControl

This error only showed, up after I attempted to add the select box, but I am not sure what I am getting the error.

new.html:

<form [formGroup]='ResolutionFormGroup'>
    <mat-form-field>
        <mat-label>Title</mat-label>
        <input [formControl]='TitleControl' matInput placeholder="Title" required/>
    </mat-form-field>
    <mat-form-field>
        <mat-label>Description</mat-label>
        <input [formControl]='DescriptionControl' matInput placeholder="Description" required/>
    </mat-form-field>
    <mat-form-field>
        <select [formControl]='CategoryControl' matInput required>
            <option>This</option>
        </select>
    </mat-form-field>
</form>

If you comment out the last <mat-form-field> section, then the code will run as expected, and I get no errors.

new.ts:

@Component({
  selector: 'app-new-resolution',
  templateUrl: './new-resolution.component.html',
  styleUrls: ['./new-resolution.component.scss']
})
export class NewResolutionComponent implements OnInit {
  uid: string
  category_id: string
  title: string
  description: string
  categoryList = []

  TitleControl: AbstractControl
  DescriptionControl: AbstractControl
  UserIdControl: AbstractControl
  CategoryControl: AbstractControl
  ResolutionFormGroup: FormGroup

  constructor(public as: AuthService,
    public rs: ResolutionsService,
    public dialog: MatDialogRef<NewResolutionComponent>) { }

  ngOnInit(): void {
    this.ResInit()
    this.rs.GetCategories().subscribe(cat=>{
      for(let c of cat){
        this.categoryList.push({value:c.payload.doc.id,category:c.payload.doc.data()['category']})
        // console.log(c.payload.doc.id)
        // console.log(c.payload.doc.data().category)
      }
    })
    console.log(this.categoryList)
  }
  private ResInit() {
    this.ResolutionFormGroup = new FormGroup({})
    this.ResolutionFormGroup.registerControl('id',(this.UserIdControl = new FormControl('',[Validators.required])))
    this.ResolutionFormGroup.registerControl('category_id',(this.CategoryControl = new FormControl('',[Validators.required])))
    this.ResolutionFormGroup.registerControl('title',(this.TitleControl = new FormControl('',[Validators.required])))
    this.ResolutionFormGroup.registerControl('description',(this.DescriptionControl = new FormControl('',[Validators.required])))

  }
  onNoClick(): void{
    this.dialog.close()
  }

}

EDIT new.module.ts (imports only):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ResolutionRoutingModule } from './resolution-routing.module';
import { ResolutionComponent } from './resolution/resolution.component';
import { ResolutionDetailComponent } from './resolution-detail/resolution-detail.component';
import { ResolutionListComponent } from './resolution-list/resolution-list.component';
import { NewResolutionComponent } from '../../forms/new-resolution/new-resolution.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';


@NgModule({
  declarations: [ResolutionComponent,ResolutionDetailComponent,ResolutionListComponent,NewResolutionComponent],
  imports: [
    CommonModule,
    ResolutionRoutingModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatDialogModule,
    FormsModule,
    MatInputModule,
    MatSelectModule
  ]
})
export class New{ }

As far as I can tell, I have everything imported correctly, and the formGroup and formControl setup correctly.

EDIT added the full new.module.ts

Answer 1

Try using mat-select and mat-option instead of select and option:

<form [formGroup]='ResolutionFormGroup'>
    <mat-form-field>
        <mat-label>Title</mat-label>
        <input [formControl]='TitleControl' matInput placeholder="Title" required/>
    </mat-form-field>
    <mat-form-field>
        <mat-label>Description</mat-label>
        <input [formControl]='DescriptionControl' matInput placeholder="Description" required/>
    </mat-form-field>
    <mat-form-field>
        <mat-select [formControl]='CategoryControl'>
            <mat-option>This</mat-option>
        </mat-select>
    </mat-form-field>
</form>