单击Angular 6中的提交按钮后的表单验证答案

【问题标题】：Form validation after clicking submit button in Angular 6单击Angular 6中的提交按钮后的表单验证
【发布时间】：2018-10-18 05:50:04
【问题描述】：

我正在使用带有 Angular 6 的 MEAN Stack 开发一个应用程序。我已经实现了一个登录页面。当我点击登录按钮而不输入电子邮件和密码时，它应该在相关文本字段下方给出验证消息。

<small class="form-text error" *ngIf="email.invalid && email.touched &&  email.errors?.required"> 

      Email is required!
</small>

<small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
      Password is required!
 </small>

现在发生的情况是，如果触摸文本字段并将其清空，则会给出错误消息。我也想要这个功能，而且如果我们在不触摸文本字段的情况下单击提交按钮，它也应该给出该消息。这是login.ts

login(): void {

    if (!this.user.email || !this.user.password){
      return;
    } 

    this.errors = this.messages = [];
    this.submitted = true;
    this.service.authenticate(this.strategy, this.user).subscribe((result: NbAuthResult) => {
      this.submitted = false;

      if (result.isSuccess()) {
        this.messages = result.getMessages();
      } else {
        this.errors = result.getErrors();
      }

      const redirect = result.getRedirect();
      if (redirect) {
        setTimeout(() => {
          return this.router.navigateByUrl(redirect);
        }, this.redirectDelay);
      }
      this.cd.detectChanges();
    });
  }

我尝试过的事情。

使用布尔变量提交尝试。

submitAttempt: boolean = false;

当文本字段为空时将其设置为 true。

 if (!this.user.email || !this.user.password){
this.submitAttempt=true;
      return;
    }

在 html 中使用它。

<small class="form-text error" *ngIf="email.invalid && email.touched &&  (email.errors?.required && submitAttempt)"> 
          Email is required!
</small>

<small class="form-text error" *ngIf="password.invalid && password.touched && (password.errors?.required && submitAttempt)">
           Password is required!
 </small>

【问题讨论】：

标签： html angular mean-stack

【解决方案1】：

您已经朝着正确的方向实施。只需稍作调整即可 -

在函数顶部移动submitted

ts

login(): void {

     this.submitted = true; //<-- this should be at top
    if (!this.user.email || !this.user.password){
      return;
    } 

    this.errors = this.messages = [];
    this.service.authenticate(this.strategy, this.user).subscribe((result: NbAuthResult) => {
      this.submitted = false;

      if (result.isSuccess()) {
        this.messages = result.getMessages();
      } else {
        this.errors = result.getErrors();
      }

      const redirect = result.getRedirect();
      if (redirect) {
        setTimeout(() => {
          return this.router.navigateByUrl(redirect);
        }, this.redirectDelay);
      }
      this.cd.detectChanges();
    });
  }

html

<small class="form-text error" *ngIf="email.invalid && ( email.touched || submitted) &&  (email.errors?.required)"> 
          Email is required!
</small>

【讨论】：

【解决方案2】：

请用这个替换ngif条件部分

*ngIf="formName.get('email').touched && formName.get('email').hasError('required')">此字段为必填项！

【讨论】：