反应形式给出错误属性“电子邮件”在类型“AppComponent”上不存在答案

【问题标题】：Reactive form giving error Property 'email' does not exist on type 'AppComponent'反应形式给出错误属性“电子邮件”在类型“AppComponent”上不存在
【发布时间】：2021-01-22 02:23:52
【问题描述】：

我正在尝试应用反应式表单验证。但它不起作用。给出错误“'AppComponent'类型上不存在属性'电子邮件'。” 源代码在此链接https://stackblitz.com/edit/angular-ivy-y3hup7?file=src/app/app.component.html

【问题讨论】：

如何更改 email.errors.required ---> signupForm.email..errors.required ？
@Rebai 仍然遇到同样的错误

标签： angular forms reactive

【解决方案1】：

您应该使用 get 方法 signupForm.get('email') 访问组中的表单控件。

已应用解决方案分叉了您的 slackblitz https://stackblitz.com/edit/angular-ivy-lciego?file=src/app/app.component.html

<form [formGroup]="signupForm" (ngSubmit)="onSubmit();">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" formControlName="email" name='email' class="form-control" id="email" required >
    <div *ngIf="signupForm.get('email').invalid && 
                (signupForm.get('email').dirty || signupForm.get('email').touched)" class="alert alert-danger">

      <div *ngIf="signupForm.get('email')?.errors?.required">
        Email is required.
      </div>
      <div *ngIf="signupForm.get('email')?.errors?.email">
        Invalid email
      </div>
     
    </div>

  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" formControlName="password" name='password' class="form-control" id="pwd" required  >
  </div>
  <button [disabled]="!signupForm.valid" type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- <router-outlet></router-outlet> -->

【讨论】：