Angular 未定义onSubmit（角度6）

我试图验证登录表单，但它说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是以相同的方式编写的。如何解决此问题？

您需要在

ngOnInit

功能块中定义

onSubmit

函数。只要看看

试试这个

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();
}

---

将

onSubmit（）

函数放入

ngOnInit（）

中

请试着把它放在

ngOnInit（）的一边。

例如：

ngOnInit(){
   // Do something 
}
OnSubmit(){
   // save data 
}

---

它对我很有效。我希望这也是给你的

在ngOnInit生命周期挂钩之外定义onsubmit方法