Angular materials working in one component but not another

Question

I've been working in Angular for the first time for a school-related project. I'm trying to make my pages look a bit better by using materials for form inputs instead of the stock HTML forms, and to great success in most of my components. However, one component in particular isn't recognizing the material tags as valid even though they work fine in the others with no discernible (to me) differences in either the.HTML file implementation or the.ts file declarations and imports.

They work in my sign in component, as shown below.

sign-in.component.html

<form [formGroup]="signInForm" (ngSubmit)="onSubmit(signInForm.value)">
    <mat-form-field>
        <mat-label>Employee ID:</mat-label>
        <input matInput type="number" formControlName="employeeId">
    </mat-form-field>
    <br>
    <mat-form-field>
        <mat-label>Password:</mat-label>
        <input matInput type="password" formControlName="password">
    </mat-form-field>
    <br>
    <button mat-raised-button type="submit">Sign In</button>
    <br>
</form>

The relevant.ts file is here. This isn't all of it, just the imports and declarations.

sign-in.component.ts

import { Component, OnInit} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { EmployeeService } from 'src/app/employee/employee.service';
import { Employee } from 'src/app/employee/employee';

@Component({
  selector: 'sign-in',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit{
  private apiUrl = environment.baseUrl + "/api/auth";

  signInForm = new FormGroup({
    employeeId: new FormControl(''),
    password: new FormControl(''),
  });

  errorMsg = null

  constructor(
    private employeeService: EmployeeService,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private http: HttpClient
  ){}
}

When I try to implement almost the exact same code in my other component, it isn't recognizing the labels.

product-detail.component.html

<h1><b>PRODUCT DETAILS</b></h1>
<form [formGroup]="productDetailsForm" (ngSubmit)="onSubmit(productDetailsForm.value)">
    <div>    
        <mat-form-field>
            <mat-label for="name">Name</mat-label>
            <input matInput id="name" type="text" formControlName="name">
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
            <mat-label for="price">Price</mat-label>
            <input matInput id="price" type="number" formControlName="price">
        </mat-form-field>
    </div>
    <div>    
        <mat-form-field>
            <mat-label for="lookupCode">Name</mat-label>
            <input matInput id="lookupCode" type="text" formControlName="lookupCode">
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
            <mat-label for="count">Price</mat-label>
            <input matInput id="count" type="number" formControlName="count">
        </mat-form-field>
    </div>
    <button *ngIf="isManager" class="button" type="submit">Save</button>
</form>
<button mat-raised-button *ngIf="isManager" class="button" (click)="deleteClicked()">Delete</button>

The relevant.ts file is below.

product-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Product } from '../product';
import { ProductService } from '../product.service';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../../services/user.service';
import { MatFormFieldModule } from '@angular/material/form-field';

@Component({
  selector: 'product-detail-t',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css'],
  providers: [ProductService, UserService]
})
export class ProductDetailComponent implements OnInit {
  @Input() id: string;
  productDetailsForm: FormGroup;
  isManager: boolean;

  constructor(
    private productService: ProductService,
    private userService: UserService,
    private formBuilder: FormBuilder,
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) {
    this.id = this.activatedRoute.snapshot.paramMap.get("id");
    this.productDetailsForm = this.formBuilder.group({
      lookupCode: new FormControl({value: '', disabled: true}),
      price: new FormControl({value: '', disabled: true}),
      name: new FormControl({value: '', disabled: true}),
      count: new FormControl({value: '', disabled: true})
    });
    this.userService.isManager()
      .then((isManager: boolean) => {
        this.isManager = isManager;
        if(isManager) {
          this.productDetailsForm.controls["name"].enable();
          this.productDetailsForm.controls["lookupCode"].enable();
          this.productDetailsForm.controls["count"].enable();
          this.productDetailsForm.controls["price"].enable();
        }
      });
  }
}

Below is my app.module.ts file, if that helps.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatToolbarModule } from '@angular/material/toolbar';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeModule } from './employee/employee.module';
import { ProductModule } from './product/product.module';
import { TransactionModule } from './transaction/transaction.module';
import { SigninComponent } from './components/signin/signin.component';
import { MainMenuComponent } from './components/main-menu/main-menu.component';
import { PageHeaderComponent } from './components/page-header/page-header.component';

import { HttpRequestInterceptor } from './HttpInterceptor';
import { TransactionPageComponent } from './transaction/transaction-page/transaction-page.component';

@NgModule({
  declarations: [
    AppComponent,
    SigninComponent,
    MainMenuComponent,
    SigninComponent,
    PageHeaderComponent,
    TransactionPageComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    EmployeeModule,
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    ProductModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule
  ],
  exports: [
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I should mention that the form in the sign-in component was created by one of my group members, but he can't seem to find the problem with my code either. Any help at all would be greatly appreciated!

Answer 1

You're getting that error probably because you have not imported the MatInputModule or any other Angular Material modules in the ProductModule where I believe your ProductDetailComponent is declared.