angular - 在 Angular 7 注册表单错误处理中出现错误，例如缺少电子邮件@

问题描述

这是我的 signup.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { JarwisService } from 'src/app/services/jarwis.service';
import { TokenService } from 'src/app/services/token.service';

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

  public form = {
    email: null,
    name: null,
    password: null,
    password_confirmation: null
  };
  public error = [];

  constructor(
    private Jarwis:JarwisService,
    private Token:TokenService,
    private router:Router
    ) { }

  onSubmit() {

    this.Jarwis.signup(this.form).subscribe(
      data => this.handleResponse(data),
      error => this.handleError(error)
    );
  }

  handleResponse(data) {
    this.Token.handle(data.access_token);
    this.router.navigateByUrl('/profile'); // here navigate to show user email has been sent to email
  }

  handleError(error) {
    this.error = error.error.errors;
  }

  ngOnInit(): void {
  }

}

这是我的 signup.component.html

<div class="mt-4 col-8 offset-2">
  <div class="card">
    <div class="card-header">Signup Here</div>
    <div class="card-body">
      <form #SignupForm=ngForm (ngSubmit)="onSubmit()">
        <div class="form-group row">
          <label for="inputName3" class="col-sm-2 col-form-label">Name</label>
          <div class="col-sm-10">
            <input type="text" name="name" class="form-control" id="inputName3" placeholder="Name" [(ngModel)]="form.name" required>
            <div class="alert alert-danger" [hidden]="!error.name">
              {{error.name}}
            </div>
          </div>
        </div>

        <div class="form-group row">
          <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
          <div class="col-sm-10">
            <input type="email" name="email" class="form-control" id="inputEmail3" placeholder="Email" [(ngModel)]="form.email" required>
            <div class="alert alert-danger" [hidden]="!error">
              {{error}}
            </div>
          </div>
        </div>

        <div class="form-group row">
          <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
          <div class="col-sm-10">
            <input type="password" name="password" class="form-control" id="inputPassword3" placeholder="Password" [(ngModel)]="form.password" required>
            <!-- <div class="alert alert-danger" [hidden]="!error.password">
              {{error.password}}
            </div> -->
          </div>
        </div>

        <div class="form-group row">
          <label for="inputPasswordConfirmatio3" class="col-sm-2 col-form-label">Confirm Password</label>
          <div class="col-sm-10">
            <input type="password" name="password_confirmation" class="form-control" id="inputPasswordConfirmatio3" placeholder="Confirm Password" [(ngModel)]="form.password_confirmation" required>
          </div>
        </div>

        <div class="form-group row">
          <div class="col-sm-10 offset-2">
            <button type="submit" class="btn btn-primary" [disabled]="SignupForm.invalid">Sign Up</button>
            <a routerLink="/login" class="btn btn-info float-right">Sign in</a>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

所以我收到语法错误“未定义标识符'name'。'any []'不包含这样的成员”并且我尝试搜索类似的错误处理但没有任何效果，在登录时它可以工作，因为它不是数组但是为什么我声明一个它抱怨的空数组

标签： angularerror-handling

angular - 在 Angular 7 注册表单错误处理中出现错误，例如缺少电子邮件@

问题描述

解决方案

推荐阅读