我的 Validator class 或 observable pipe 中的错误究竟是什么导致此错误在我的控制台中不断发生？

Question

一段时间后，错误不断出现在我的控制台上。谁能告诉我是因为片状 API 吗？我是 Angular

的初学者

异步验证器Class:

import { AsyncValidator, FormControl } from '@angular/forms'
import { AuthService } from '../auth.service'
import { Injectable } from '@angular/core';
import { map, catchError } from 'rxjs/operators'
import { of } from 'rxjs';

@Injectable ({providedIn : 'root'})

export class UniqueUsername implements AsyncValidator{
    constructor(private authService: AuthService){}

    validate = (control: FormControl) => {
        const { value } = control;
       
        return this.authService.usernameAvailable(value).pipe(
            map(()=> {
                return null;
            }),

            catchError(err=> {
                if(err.error.username){
                    return of({ nonUniqueUsername: true })
                }
                else{
                    return of({ noConnection: true})
                }
            })
        );
    }

    
}

服务：

   import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }

  usernameAvailable(username: string){
    return this.http.post<any>(' https://api.angular-email.com/auth/username ', {
      username: username
    })
  }
}

我的控制台上不断出现的错误：

Answer 1

答案实际上在您的堆栈跟踪中。看起来您在 signup.component.html 上使用 json 管道，但 Angular 不知道它是什么。这很可能是由于您的 AppModule 中没有导入 CommonModule 造成的：

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


@NgModule({
    ...
    imports: [ CommonModule ]
    ...
})

我的 Validator class 或 observable pipe 中的错误究竟是什么导致此错误在我的控制台中不断发生？

What exactly is the error in my Validator class or the observable pipe that this error keeps occuring in my console?

validation

angular

angular-reactive-forms

angular-custom-validators