Angular ngIf和formcontrol.touch不工作

我以前做过反应形式的验证，但从未遇到过这个问题。我在注册表格中的电话号码字段中有验证器。必填项。我在模板中使用了formcontrol.invalid和formcontrol.toucted属性来捕获错误，但它没有显示错误div。奇怪的是，如果我删除了formcontrol.toucted，那么就会触发formcontrol.invalid。但问题是，当我输入一些数据时，error div仍然可见

我回到学校看到了这一点，但没有发现区别。我在代码中尝试了不同的文章和实现，但没有任何效果。这在我的代码中是可见的

注册.component.ts

注册.module.ts

应用程序模块.ts

如果你还需要什么，请告诉我

更新1：我在申请表中的另一张表格，即otp checker表格上尝试了类似的验证。在这里，验证工作正常。otp检查表仅在注册模块中。我已经为上面的sign-up.module.ts提供了代码。代码如下

otp checker.component.html

---

更新2：我甚至试图使注册和OTP检查表几乎完全相同（变量名称与之不同），但仍然没有改变。

@JBNizet发现了打字错误。我想我只需要第二双眼睛。打字错误如下所示：

<input formContorlName="emailAddress" type="email" id="inputEmail" class="form-control" placeholder="Email address">
               ^^

^^

应该是：

<input formControlName="emailAddress" type="email" id="inputEmail" class="form-control" placeholder="Email address">

你能试试这个吗->

！form.get（'emailAddress'）。有效和&form.get（'emailAddress'）。触碰

@Neel我试过但没用。试试它（phoneNumber.invalid&&（phoneNumber.dirty | | phoneNumber.touch））@Stefan我试过但没用。请查看我的更新。

formContorlName

：有一个打字错误。从那以后我就不再读书了。投票以打字错误结束。

import { ReactiveFormsModule } from '@angular/forms';
import { OtpCheckerService } from './otp-checker/services/otp-checker.service';
import { SignUpService } from './services/sign-up.service';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SignUpRoutingModule } from './sign-up-routing.module';
import { SignUpComponent } from './sign-up.component';
import { OtpCheckerComponent } from './otp-checker/otp-checker.component';

@NgModule({
  imports: [
    CommonModule,
    SignUpRoutingModule,
    ReactiveFormsModule
  ],
  declarations: [SignUpComponent, OtpCheckerComponent],
  providers:[SignUpService, OtpCheckerService]
})
export class SignUpModule { }

import { AppErrorHandler } from './common/error-handling/app-error-handler';
import { UserDataService } from './global-services/user-data.service';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    ReactiveFormsModule
  ],
  providers: [
    // This service is used for storing and customer related data only.
    UserDataService,
    // Registring global error handler. Also, wherever Angular uses ErrorHandler 
    // it will be replaced by AppErrorHandler
    { provide: ErrorHandler , useClass: AppErrorHandler}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<form class="form-otpChecker" [formGroup]="form">
    <h1 class="h3 mb-3 font-weight-normal">Please enter otp</h1>
    <div>
        <input 
            formControlName="otp" 
            type="password" 
            id="inputPassword" 
            class="form-control" 
            placeholder="OTP"
            >
        <div *ngIf="otp.invalid && otp.touched" class="alert alert-danger">OTP is required field.</div>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" (click)="submit()">Submit</button>
</form>

import { UserDataService } from './../../global-services/user-data.service';
import { OtpCheckerService } from './services/otp-checker.service';
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { User } from '../../entities/user';
import { FormControl, FormGroup, Validators } from '@angular/forms';

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

  private _user: User;

  form : FormGroup;
  get otp (){
    return this.form.get('otp');
  }

  constructor(
    private _router : Router,
    private _userDataService : UserDataService,
    private _otpCheckerService : OtpCheckerService
  ) { 

    this.form = new FormGroup({
      'otp': new FormControl('', Validators.required)
    });
  }
  ngOnInit() {
    this._userDataService.broadCastUser.subscribe(user => this._user = user);
  }

  submit(){
    // TODO : change the hardcoded value as per API response.
    this._otpCheckerService.getAll().subscribe(
      response => {
        console.log(response);
        this._user.isSignedIn = true;
        this._router.navigate(['/checkout']);
      }
    );
  }
}

<input formContorlName="emailAddress" type="email" id="inputEmail" class="form-control" placeholder="Email address">
               ^^

<input formControlName="emailAddress" type="email" id="inputEmail" class="form-control" placeholder="Email address">