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上和打字稿onSubmit是用相同的方式编写的。我该如何解决这个问题？

Answer 1

您需要在onSubmit功能块中定义ngOnInit功能。只需查看 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();
}

Answer 2

您将$this->notifications函数放在onSubmit()内。

请尝试将其放在ngOnInit()的外侧。

例如：

ngOnInit()

它为我工作。我希望它也适合您。

未定义onSubmit（角度6）

2 个答案: