Angular 14实现网站登录鉴权及form.get不是函数错误解决

一、解决「ERROR TypeError: this.form.get is not a function」错误 #

这个错误的核心是this.form并非Angular FormGroup/FormControl实例，以下是常见场景及修复方案：

• 初始化错误：
  检查组件中form的定义，必须用FormBuilder或new FormGroup()创建，而非普通对象。
  错误示例：form = {};
  正确示例：

  import { FormBuilder, FormGroup } from '@angular/forms';
  
  constructor(private fb: FormBuilder) {}
  
  ngOnInit(): void {
    this.form = this.fb.group({
      username: [''],
      password: ['']
    });
  }
  

• 模板绑定错误：
  确认模板中[formGroup]指令绑定的变量与组件中FormGroup实例的变量名一致。
  错误示例：模板用<form [formGroup]="loginForm">但组件中是form: FormGroup;
  正确示例：<form [formGroup]="form">
• 异步初始化问题：
  若form通过异步操作赋值，需确保调用this.form.get()前已完成初始化。可在ngOnInit同步初始化，或用*ngIf="form"控制模板渲染时机。

二、Axios登录+带Token请求转Angular HttpClient实现 #

1. 编写AuthService处理登录与Token管理 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private token: string | null = null;
  private apiUrl = '你的后台API根地址';

  constructor(private http: HttpClient) {}

  // 登录接口，获取并存储Token
  login(username: string, password: string) {
    return this.http.post(`${this.apiUrl}/login`, { username, password }).pipe(
      tap((res: any) => {
        this.token = res.token; // 适配你的后台Token字段名
        localStorage.setItem('authToken', this.token); // 可选：持久化Token
      })
    );
  }

  // 生成带Token的请求头
  getAuthHeaders(): HttpHeaders {
    const token = this.token || localStorage.getItem('authToken');
    return new HttpHeaders({
      'Authorization': `Bearer ${token}`
    });
  }
}

2. 编写MachineService获取机器列表 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class MachineService {
  private apiUrl = '你的后台API根地址';

  constructor(private http: HttpClient, private authService: AuthService) {}

  // 携带Token请求机器列表
  getMachineList() {
    const headers = this.authService.getAuthHeaders();
    return this.http.get(`${this.apiUrl}/machines`, { headers });
  }
}

3. 组件中整合表单与服务调用 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuthService } from './auth.service';
import { MachineService } from './machine.service';

@Component({
  selector: 'app-machine-login',
  template: `
    <form [formGroup]="form" (ngSubmit)="onLogin()">
      <input formControlName="username" placeholder="用户名">
      <input formControlName="password" type="password" placeholder="密码">
      <button type="submit" [disabled]="form.invalid">登录</button>
    </form>
  `
})
export class MachineLoginComponent implements OnInit {
  form!: FormGroup;

  constructor(
    private fb: FormBuilder,
    private authService: AuthService,
    private machineService: MachineService
  ) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      username: [''],
      password: ['']
    });
  }

  onLogin() {
    const { username, password } = this.form.value;
    this.authService.login(username, password).subscribe({
      next: () => {
        this.machineService.getMachineList().subscribe(machines => {
          console.log('机器列表:', machines);
          // 后续处理机器列表数据
        });
      },
      error: err => console.error('登录失败:', err)
    });
  }
}

4. 必要的模块导入 #

在app.module.ts中导入依赖模块：

import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [HttpClientModule, ReactiveFormsModule]
})
export class AppModule {}

内容的提问来源于stack exchange，提问作者GTB4