当前位置： 文江博客话题详情

Angular：为什么我在项目中引入了ReactiveFormSmodule，我项目中声明的所有angualr元素都开始给出错误？

发布于 2025-02-04 07:12:27 字数 14406 浏览 4 评论 0原文

我正在使用Angular材料从事一个Angular 13项目，当我尝试在项目中介绍反应性形式时，我发现了以下奇怪的项目。请注意，在介绍此组件（使用反应性形式）之前，该项目正常工作，如果我“删除”此组件，则可以再次工作。

首先，我创建了以下材料.module.ts 文件以包含所有材料依赖性：

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from "@angular/material/core";
import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
    imports: [MatButtonModule,
              MatIconModule,
              MatFormFieldModule,
              MatInputModule,
              MatDatepickerModule,
              MatNativeDateModule,
              MatCheckboxModule
            ],
    exports: [MatButtonModule,
              MatIconModule,
              MatFormFieldModule,
              MatInputModule,
              MatDatepickerModule,
              MatNativeDateModule,
              MatCheckboxModule
            ]
})
export class MaterialModule {

}

然后我创建了这个新的 login.component.ponent.html file

<section>
    <form fxLayout="column" 
          fxLayoutAlign="center center"
          [formGroup]="loginForm">
        <mat-form-field>
            <input type="email" 
                   matInput 
                   placeholder="Your Email"
                   formControlName="email">
        </mat-form-field>

        <mat-form-field>
            <input type="password" 
                   matInput 
                   placeholder="Your Password"
                   formControlName="password">
        </mat-form-field>

    </form>
</section>

：可以看到它包含使用反应性方法进行验证的表单。

然后，我创建了相关 login.component.ts 文件：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators,  } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;

  constructor() { }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl('', {validators: [Validators.required, Validators.email]}),
      password: new FormControl('', {validators: [Validators.required]})

    })
  }

}

问题是，之后，我介绍了这个新组件（基本上是在此之后，我声明了 reactiveiveformsModule的导入\ export 进入主 app.module.ts文件：

@NgModule({
  declarations: [
    AppComponent,
    SignupComponent,
    LoginComponent,
    TrainingComponent,
    CurrentTrainingComponent,
    NewTrainingComponent,
    PastTrainingComponent,
    WelcomeComponent,
    ReactiveFormsModule,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我在控制台中获得了这些错误（也与项目的其他组件相关）

。 没有更多的认可。

Build at: 2022-06-03T11:56:41.733Z - Hash: 9b66a01fac4df3bd - Time: 8483ms

Error: src/app/app.component.html:1:1 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <router-outlet></router-outlet>
  ~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.module.ts:30:5 - error NG6001: Cannot declare 'ReactiveFormsModule' in an NgModule as it's not a part of the current compilation.

30     ReactiveFormsModule,
       ~~~~~~~~~~~~~~~~~~~

  node_modules/@angular/forms/forms.d.ts:4078:22
    4078 export declare class ReactiveFormsModule {
                              ~~~~~~~~~~~~~~~~~~~
    'ReactiveFormsModule' is declared here.


Error: src/app/auth/login/login.component.html:5:11 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

5           [formGroup]="loginForm">
            ~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/login/login.component.ts:6:16
    6   templateUrl: './login.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.


Error: src/app/auth/login/login.component.html:6:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

6         <mat-form-field>
          ~~~~~~~~~~~~~~~~

  src/app/auth/login/login.component.ts:6:16
    6   templateUrl: './login.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.


Error: src/app/auth/login/login.component.html:13:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

13         <mat-form-field>
           ~~~~~~~~~~~~~~~~

  src/app/auth/login/login.component.ts:6:16
    6   templateUrl: './login.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.


Error: src/app/auth/signup/signup.component.html:2:82 - error NG8003: No directive found with exportAs 'ngForm'.

2     <form fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px" #f="ngForm" (ngSubmit)="onSubmit(f)">
                                                                                   ~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:3:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3         <mat-form-field>
          ~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:11:33 - error NG8003: No directive found with exportAs 'ngModel'.

11                    #emailInput="ngModel">
                                   ~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:16:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

16         <mat-form-field hintLabel="Should be at least 6 characters long.">
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:24:30 - error NG8003: No directive found with exportAs 'ngModel'.

24                    #pwInput="ngModel">
                                ~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:25:13 - error NG8001: 'mat-hint' is not a known element:
1. If 'mat-hint' is an Angular component, then verify that it is part of this module.
2. If 'mat-hint' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

25             <mat-hint align="end">{{ pwInput.value?.length }} / 6</mat-hint>
               ~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:26:13 - error NG8001: 'mat-error' is not a known element:
1. If 'mat-error' is an Angular component, then verify that it is part of this module.
2. If 'mat-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

26             <mat-error>Must be at least 6 characters long.</mat-error>
               ~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:29:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

29         <mat-form-field>
           ~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:32:20 - error NG8002: Can't bind to 'matDatepicker' since it isn't a known property of 'input'.

32                    [matDatepicker]="picker"
                      ~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:36:13 - error NG8001: 'mat-datepicker-toggle' is not a known element:
1. If 'mat-datepicker-toggle' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

36             <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:36:46 - error NG8002: Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'.
1. If 'mat-datepicker-toggle' is an Angular component and it has 'htmlFor' input, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

36             <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                                ~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:37:13 - error NG8001: 'mat-datepicker' is not a known element:
1. If 'mat-datepicker' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

37             <mat-datepicker #picker></mat-datepicker>
               ~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:41:9 - error NG8001: 'mat-checkbox' is not a known element:
1. If 'mat-checkbox' is an Angular component, then verify that it is part of this module.
2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

41         <mat-checkbox ngModel name="agree" required color="primary">Agree Terms and Conditions</mat-checkbox>
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

在我介绍了 ReactiveFormsModule之后，

原文

I am working on an Angular 13 project using Angular material and I am finding the following strange project when I try to introduce the use of reactive form in my project. Note that before introduce this component (using reactive form) the project worked fine and if I "delete" this component it works again.

First of all I created the following material.module.ts file in order to contains all the Material dependency:

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from "@angular/material/core";
import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
    imports: [MatButtonModule,
              MatIconModule,
              MatFormFieldModule,
              MatInputModule,
              MatDatepickerModule,
              MatNativeDateModule,
              MatCheckboxModule
            ],
    exports: [MatButtonModule,
              MatIconModule,
              MatFormFieldModule,
              MatInputModule,
              MatDatepickerModule,
              MatNativeDateModule,
              MatCheckboxModule
            ]
})
export class MaterialModule {

}

Then I created this new login.component.html file:

<section>
    <form fxLayout="column" 
          fxLayoutAlign="center center"
          [formGroup]="loginForm">
        <mat-form-field>
            <input type="email" 
                   matInput 
                   placeholder="Your Email"
                   formControlName="email">
        </mat-form-field>

        <mat-form-field>
            <input type="password" 
                   matInput 
                   placeholder="Your Password"
                   formControlName="password">
        </mat-form-field>

    </form>
</section>

as you can see it contains a form using reactive approach for validation.

Then I created the related login.component.ts file:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators,  } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;

  constructor() { }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl('', {validators: [Validators.required, Validators.email]}),
      password: new FormControl('', {validators: [Validators.required]})

    })
  }

}

The problem is that, after that I introduced this new componented (basically after that I declared the import\export of the ReactiveFormsModule into the main app.module.ts file that is:

@NgModule({
  declarations: [
    AppComponent,
    SignupComponent,
    LoginComponent,
    TrainingComponent,
    CurrentTrainingComponent,
    NewTrainingComponent,
    PastTrainingComponent,
    WelcomeComponent,
    ReactiveFormsModule,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I obtained these errors (related also to other components of my project) into the console.

Basically it is as all the Angular elements used into my project are no more recognized as knowed element after that I introduced the ReactiveFormsModule:

Build at: 2022-06-03T11:56:41.733Z - Hash: 9b66a01fac4df3bd - Time: 8483ms

Error: src/app/app.component.html:1:1 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <router-outlet></router-outlet>
  ~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.module.ts:30:5 - error NG6001: Cannot declare 'ReactiveFormsModule' in an NgModule as it's not a part of the current compilation.

30     ReactiveFormsModule,
       ~~~~~~~~~~~~~~~~~~~

  node_modules/@angular/forms/forms.d.ts:4078:22
    4078 export declare class ReactiveFormsModule {
                              ~~~~~~~~~~~~~~~~~~~
    'ReactiveFormsModule' is declared here.


Error: src/app/auth/login/login.component.html:5:11 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

5           [formGroup]="loginForm">
            ~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/login/login.component.ts:6:16
    6   templateUrl: './login.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.


Error: src/app/auth/login/login.component.html:6:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

6         <mat-form-field>
          ~~~~~~~~~~~~~~~~

  src/app/auth/login/login.component.ts:6:16
    6   templateUrl: './login.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.


Error: src/app/auth/login/login.component.html:13:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

13         <mat-form-field>
           ~~~~~~~~~~~~~~~~

  src/app/auth/login/login.component.ts:6:16
    6   templateUrl: './login.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.


Error: src/app/auth/signup/signup.component.html:2:82 - error NG8003: No directive found with exportAs 'ngForm'.

2     <form fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px" #f="ngForm" (ngSubmit)="onSubmit(f)">
                                                                                   ~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:3:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3         <mat-form-field>
          ~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:11:33 - error NG8003: No directive found with exportAs 'ngModel'.

11                    #emailInput="ngModel">
                                   ~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:16:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

16         <mat-form-field hintLabel="Should be at least 6 characters long.">
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:24:30 - error NG8003: No directive found with exportAs 'ngModel'.

24                    #pwInput="ngModel">
                                ~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:25:13 - error NG8001: 'mat-hint' is not a known element:
1. If 'mat-hint' is an Angular component, then verify that it is part of this module.
2. If 'mat-hint' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

25             <mat-hint align="end">{{ pwInput.value?.length }} / 6</mat-hint>
               ~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:26:13 - error NG8001: 'mat-error' is not a known element:
1. If 'mat-error' is an Angular component, then verify that it is part of this module.
2. If 'mat-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

26             <mat-error>Must be at least 6 characters long.</mat-error>
               ~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:29:9 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

29         <mat-form-field>
           ~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:32:20 - error NG8002: Can't bind to 'matDatepicker' since it isn't a known property of 'input'.

32                    [matDatepicker]="picker"
                      ~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:36:13 - error NG8001: 'mat-datepicker-toggle' is not a known element:
1. If 'mat-datepicker-toggle' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

36             <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:36:46 - error NG8002: Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'.
1. If 'mat-datepicker-toggle' is an Angular component and it has 'htmlFor' input, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

36             <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                                ~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:37:13 - error NG8001: 'mat-datepicker' is not a known element:
1. If 'mat-datepicker' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

37             <mat-datepicker #picker></mat-datepicker>
               ~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.


Error: src/app/auth/signup/signup.component.html:41:9 - error NG8001: 'mat-checkbox' is not a known element:
1. If 'mat-checkbox' is an Angular component, then verify that it is part of this module.
2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

41         <mat-checkbox ngModel name="agree" required color="primary">Agree Terms and Conditions</mat-checkbox>
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/auth/signup/signup.component.ts:6:16
    6   templateUrl: './signup.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignupComponent.




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

Why? What is wrong? What am I missing? How can I try to fix it?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

爺獨霸怡葒院 2025-02-11 07:12:27
declarations: [
    ...
    ReactiveFormsModule, // worng place to import

]

您需要仅在imports中导入ReactiveFormsModule

declarations: [
    ...
    ReactiveFormsModule, // worng place to import

]

You need to import the ReactiveFormsModule only in the imports

回复 原文
梦屿孤独相伴 2025-02-11 07:12:27

ReactiveFormsModule不应在声明中。

The ReactiveFormsModule should not be in the declarations.

回复 原文
~没有更多了~

关于作者

温柔女人霸气范

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文