angular - Angular 7注册表单错误处理中出现错误，例如，如果电子邮件丢失@

Question

这是我的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 []'不包含这样的memberng”，并且我试图搜索类似的错误处理，但是没有任何作用，在登录时它起作用了，因为它不是数组，但是为什么我要声明一个空数组

Answer 1

我换了

public error = [];

至

public error = {name:null, email:null, password:null};

而且有效。