时间戳

首页 > 解决方案 > 重新启动服务器后角度反应形式的错误

angular - 重新启动服务器后角度反应形式的错误

问题描述

重新启动服务器后角度反应形式的错误

这是我的代码

在 app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RegisterComponent } from './account/register/register.component';
import { LoginComponent } from './account/login/login.component';
import { NavBarComponent } from './shared/nav-bar/nav-bar.component';
import { FooterComponent } from './shared/footer/footer.component';
import { HomeComponent } from './home/home.component';
import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent,
    LoginComponent,
    NavBarComponent,
    FooterComponent,
    HomeComponent,
  ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      ReactiveFormsModule
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在注册组件 .ts

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

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

  registrationForm: FormGroup ;
  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
  this.registrationForm = this.fb.group({
  userName: '',
  email: '',
  password: '',
  confirmPassword: '',
    });
  }

  register(): void{
    console.log(this.registrationForm.value);
  }
}

在注册组件 .html

 <div class="container mb-4 ar">
  <h5>التسجيل</h5>
  <hr>
  <div class="login-container">
    <form [formGroup]="registrationForm" (ngSubmit)="register()">
      <!-- UserName input -->
      <div class="form-group row">
        <label for="UserName" class="col-sm-3 col-form-label">اسم المستخدم</label>
        <div class="col-sm-9">
          <input formControlName="userName" type="text" class="form-control" id="UserName" placeholder="اسم المستخدم">
        </div>
      </div>
      <!-- Email input -->
      <div class="form-group row">
        <label class="col-sm-3 col-form-label" for="Email">البريد الاليكترونى</label>
        <div class="col-sm-9">
          <input formControlName="email" type="email" id="Email" class="form-control" placeholder="البريد الاليكترونى"/>
        </div>
      </div>
      <!-- Password input -->
      <div class="form-group row">
        <label class="col-sm-3 col-form-label" for="password">كلمة السر</label>
        <div class="col-sm-9">
          <input formControlName="password" type="password" id="password" class="form-control" placeholder="كلمة السر"/>
        </div>
      </div>
      <!-- ConfirmPassword input -->
      <div class="form-group row">
        <label class="col-sm-3 col-form-label" for="confirmPassword"> تاكيد كلمة السر</label>
        <div class="col-sm-9">
          <input formControlName="confirmPassword" type="password" id="confirmPassword" class="form-control" placeholder=" تاكيد كلمة السر"/>
        </div>
      </div>
      <!-- Submit button -->
      <div class="text-center">
        <button type="submit" class="btn btn-primary m-2">التسجيل</button>
        <div class="alert alert-primary" role="alert">
          <strong>primary</strong>
        </div>
        <a>لدى حساب</a>
        <a href=""> تسجيل الدخول</a>
      </div>
    </form>
  </div>
</div>

我工作得很好，但是当我重新启动服务器时，我 收到的控制台错误中有两个错误

当我创建表单时它工作正常但是当我停止服务器并再次启动它时我得到了这些错误

core.js:4197 错误错误：NodeInjector: NOT_FOUND [ControlContainer] at getOrCreateInjectable (core.js:3935) at Module.ɵɵdirectiveInject (core.js:13753) at NodeInjectorFactory.NgControlStatusGroup_Factory [as factory] ​​(forms.js:706) at getNodeInjectable (core.js:4029) at instantiateAllDirectives (core.js:7964) at createDirectivesInstances (core.js:7330) at Module.ɵɵelementStart (core.js:13902) at NavBarComponent_Template (nav-bar.component.html:24)在 executeTemplate (core.js:7303) 在 renderView (core.js:7112) defaultErrorLogger @ core.js:4197 main.ts:12 错误：NodeInjector: NOT_FOUND [ControlContainer] at getOrCreateInjectable (core.js:3935) 在模块。 ɵɵdirectiveInject (core.js:13753) at NodeInjectorFactory.NgControlStatusGroup_Factory [as factory] ​​(forms.js:706) at getNodeInjectable (core.js:4029) at instantiateAllDirectives (core.js:7964) at createDirectivesInstances (core.js:7330) at Module.ɵɵelementStart (core.js:13902) at NavBarComponent_Template (nav-bar.component.html:24) at executeTemplate (core.js:7303) at renderView (core.js ：7112）（匿名）@ main.ts：12 客户端：52 [WDS] 启用实时重新加载。

标签： angular

解决方案

您应该更改 ngOnInitregistration.component.ts并将 FormsModule 导入app.module

this.registrationForm = this.fb.group({
  userName: '',
  email: '',
  password: '',
  confirmPassword: '',
});

推荐阅读