angular - onSubmit 未定义(Angular 6)

Question

我正在尝试验证登录表单，但它显示未定义 onSubmit。这是代码:

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-customer-signin',
  templateUrl: './customer-signin.component.html',
  styleUrls: ['./customer-signin.component.css']
})
export class CustomerSigninComponent implements OnInit {
   customerSigninForm: FormGroup;

  constructor() {}

  ngOnInit() {
   this.customerSigninForm = new FormGroup({
       'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
       'pwd': new FormControl(null, [Validators.required,
       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')
        ]);
     });

  onSubmit() {
    console.log(this.customerSigninForm);
    this.customerSigninForm.reset();
  }
}

}

这里还有 HTML 部分:

<form action="" [formGroup]="customerSigninForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text" id="email" formControlName="email"/>
            <span *ngIf="!customerSigninForm.get('email').valid && customerSigninForm.get('email').touched" class="help-block">Please enter a valid email!</span>
        </div>
        <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Password" type="password" formControlName="pwd"/>
            <span *ngIf="!customerSigninForm.get('pwd').valid && customerSigninForm.get('pwd').touched" class="help-block">Please enter a valid password!</span>
        </div>
        <div class="form-group">
            <div class="extra-btns align-items-center">
                <button class="btn btn-link ">Forget Password</button>
                <button class="btn btn-link ">Forget Password</button>
            </div>
            <div>
                <span
          *ngIf="!customerSigninForm.valid && customerSigninForm.touched"
          class="help-block">Please enter valid data!</span>
                <button type="submit" class="  btn form-btn btn-lg btn-block">Sign In With Email</button>
                      </div>
        </div>
    </form>

怎么了？为什么会抛出该错误？我在网上找了很多例子，都是这个样子的。我假设没有拼写错误，因为在 HTML 和 typescript 上 onSubmit 是以相同的方式编写的。我该如何解决这个问题？

Answer 1

您需要在ngOnInit 函数 block 中定义onSubmit 函数。看看 angular-lifecycle-hooks

试试这个

ngOnInit() {
   this.customerSigninForm = new FormGroup({
       'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
       'pwd': new FormControl(null, [Validators.required,
       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')
        ]);
     });
}

onSubmit() {
    console.log(this.customerSigninForm);
    this.customerSigninForm.reset();
}