反应形式给出错误 属性 'email' 在类型 'AppComponent' 上不存在

Question

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

Answer 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> -->