VS 代码显示 Angular Reactive Form Control 的代码问题

Question

我收到 Angular Language Service 突出显示的代码问题，显示我无法绑定到“formControl”，因为它不是“input”的已知属性。

我已经仔细检查了反应式表单模块是否已在 app.module 中注册，但我只是找不到它不识别它的原因。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';

import { environment } from 'src/environments/environment';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import { TimetableListComponent } from './components/timetable-list/timetable-list.component';
import { LoginComponent } from './components/login/login.component';

import { AuthGuardService } from './services/auth-guards/auth-guard.service';
import { TimetablesService } from './services/timetables/timetables.service';
import { UserService } from './services/users/user.service';
import { GenericService } from './services/generic/generic.service';

@NgModule({

  declarations: [
    AppComponent,
    NavbarComponent,
    DashboardComponent,
    PageNotFoundComponent,
    TimetableListComponent,
    LoginComponent
  ],
  
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    MatCardModule,
    MatInputModule,
  ],
  
  providers: [
    AuthGuardService,
    TimetablesService,
    GenericService,
    UserService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

登录.组件.ts

import { Component, OnInit } from '@angular/core';

import { FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent {
  
  emailFormControl = new FormControl('', [Validators.required, Validators.email]);
  passwordFormControl = new FormControl('', [Validators.required]);

}

登录.component.html

<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>zz</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form>
      <mat-form-field class="example-full-width">
          <mat-label>Email</mat-label>
          <input  type="email" matInput [formControl]="emailFormControl" placeholder="Ex. [email protected]" name="userEmailAddress" >
          <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
            Please enter a valid email address
          </mat-error>
          <mat-error *ngIf="emailFormControl.hasError('required')">
            Email is <strong>required</strong>
          </mat-error>
        </mat-form-field>
    </form>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

我已经审查了我能找到的所有已知问题，并且很多信息表明反应式模块没有被导入。我很确定我这样做是正确的。

Answer 1

嗯，这是一个非常愚蠢的错误。我在用户模式下安装了 VS code，因此它没有更新，因此 Angular 语言服务也没有更新。

更新了两者，现在工作正常。只是在这里发帖以防其他人遇到这个问题