Блог

Я создаю компонент входа в систему в Angular 12, используя реактивные формы. Ниже показано, как выглядит файл шаблона и машинописный текст.

Но я продолжаю получать эту ошибку при запуске в браузере (пробовал также использовать FormBuilder, но все равно получаю ту же ошибку):

 core.js:6456 ERROR TypeError: this.ngControl?.control?.hasValidator is not a function  at MatInput.get required [as required] (input.mjs:194)  at MatInput_HostBindings (input.mjs:388)  at processHostBindingOpCodes (core.js:9213)  at refreshView (core.js:9491)  at refreshComponent (core.js:10616)  at refreshChildComponents (core.js:9242)  at refreshView (core.js:9495)  at refreshEmbeddedViews (core.js:10570)  at refreshView (core.js:9469)  at refreshComponent (core.js:10616)  

signup.component.html

 lt;sectiongt;  lt;form fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px" [formGroup]="loginForm"  (ngSubmit)="onSubmit()"gt;  lt;mat-form-fieldgt;  lt;input type="email" matInput placeholder="Your email" formControlName="email"gt;  lt;mat-hintgt;Please enter a valid email.lt;/mat-hintgt;  lt;mat-errorgt;Invalid or missing email.lt;/mat-errorgt;  lt;/mat-form-fieldgt;  lt;mat-form-field gt;  lt;input type="password" matInput placeholder="Your password" formControlName="password"gt;  lt;mat-hintgt;"Should be at least 6 characters long."lt;/mat-hintgt;  lt;mat-errorgt;Missing password.lt;/mat-errorgt;  lt;/mat-form-fieldgt;  lt;mat-form-fieldgt;  lt;mat-labelgt;Choose a datelt;/mat-labelgt;  lt;input matInput [max]="maxDate" [matDatepicker]="picker" formControlName="datepicker"gt;  lt;mat-datepicker-toggle matSuffix [for]="picker"gt;lt;/mat-datepicker-togglegt;  lt;mat-datepicker #pickergt;lt;/mat-datepickergt;  lt;/mat-form-fieldgt;  lt;mat-checkbox color="primary" formControlName="checkbox"gt;Agree to Terms and Conditions.lt;/mat-checkboxgt;  lt;button type="submit" mat-raised-button color="primary" [disabled]=loginForm.invalidgt;Submitlt;/buttongt;  lt;/formgt; lt;/sectiongt;  

регистрация.компонент.ts

 import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms';  @Component({  selector: 'app-signup',  templateUrl: './signup.component.html',  styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit {  maxDate: Date | undefined;  loginForm!: FormGroup;   constructor() { }   ngOnInit(): void {  this.maxDate = new Date();  this.maxDate.setFullYear(this.maxDate.getFullYear() - 18);   this.loginForm = new FormGroup({  email: new FormControl('', {  validators: [Validators.required, Validators.email]  }),  password: new FormControl('', {  validators: [Validators.required]  }),  datepicker: new FormControl('', {  validators: [Validators.required]  }),  checkbox: new FormControl('', {  validators: [Validators.required]  }),  });  }    onSubmit() {  console.log(this.loginForm);  } }  

Кто-нибудь знает, как решить эту проблему? Вроде как застрял здесь после нескольких часов поиска в Интернете и тестирования.

Вот мое приложение.module.ts, а также

 import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule} from '@angular/platform-browser/animations' import { FlexLayoutModule } from '@angular/flex-layout';  import { AppComponent } from './app.component'; import { MaterialModule } from './material.module'; import { SignupComponent } from './auth/signup/signup.component'; import { LoginComponent } from './auth/login/login.component'; import { TrainingComponent } from './training/training.component'; import { CurrentTrainingComponent } from './training/current-training/current-training.component'; import { NewTrainingComponent } from './training/new-training/new-training.component'; import { PastTrainingComponent } from './training/past-training/past-training.component'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppRoutingModule } from './app-routing.module';  @NgModule({  declarations: [  AppComponent,  SignupComponent,  LoginComponent,  TrainingComponent,  CurrentTrainingComponent,  NewTrainingComponent,  PastTrainingComponent,  WelcomeComponent  ],  imports: [  BrowserModule,  BrowserAnimationsModule,  MaterialModule,  AppRoutingModule,  FlexLayoutModule,  ReactiveFormsModule,    ],  providers: [],  bootstrap: [AppComponent] }) export class AppModule { }  

Попробуйте добавить необходимый параметр во входные данные, как показано ниже

 lt;mat-form-fieldgt;  lt;mat-labelgt;label namelt;/mat-labelgt;  lt;input [type]="text" matInput value="value" required [(ngModel)]="name"gt;  lt;/mat-form-fieldgt;  

Это сработало для меня. этот код работал нормально без изменений в angular 13.