Angular 2 提交时触发表单验证

Posted 2023-03-13

【中文标题】Angular 2 提交时触发表单验证

【英文标题】：Angular 2 Trigger Form Validation on Submit

【发布时间】：2017-03-06 01:27:11

【问题描述】：

我用 angular 2 创建了一个表单并添加了一些自定义验证器。现在我想在用户点击提交按钮时触发表单验证。在到目前为止我发现的示例中，只要表单无效，提交按钮就会被禁用，但我希望始终启用提交按钮，并且当用户单击提交时，应该验证表单。有谁知道我该如何完成这项工作以及我应该使用哪种打字稿方法？我找到了 updateValueAndValidity 方法，但它似乎不适用于此方法。

【参考方案1】：

组件 html 文件： 您必须将表单组模型添加到表单标签和 ngsubmit 方法中才能在提交表单时调用提交函数。请在每个输入字段中添加 formControlName，名称应与您在组件 ts 文件中声明的名称相同。 mat-error 是显示验证错误。我们在 *ngIf 中传递了一个返回类型函数，它将验证控制错误并返回 true 或 false。如果它返回 true，那么我们将显示 mat-error。

<form [formGroup]="Addform" (ngSubmit)="submit(Addform)">
   <h1 mat-dialog-title>Add Field</h1>
   <mat-dialog-content>
      <mat-form-field>
         <input matInput formControlName="make" placeholder="Make...">
         <mat-error *ngIf="hasError('make', 'required')">Make is required</mat-error>
      </mat-form-field>
   </mat-dialog-content>
</form>

组件 ts 文件 首先，我们必须声明具有 FormGroup 类型的 AddForm 组。并且使用 FormBuilder 我们必须为这个特定的表单组设置规则。

import  Component, OnInit  from '@angular/core';
import  FormGroup, FormBuilder, Validators  from '@angular/forms';

@Component(
  selector: 'app-comp',
  templateUrl: './app-comp.html'
)

export class CustomAddForm implements OnInit 
   Addform: FormGroup;
   submitted = false; // by default set submitted to false
   constructor(
     private formBuilder: FormBuilder
   ) 

   ngOnInit() 
     // initialization time assign the form control rules to form builder.
     this.Addform = this.formBuilder.group(
      make: ['', Validators.required]
     )
   

   // getter function to provide the control validation info to html 
   public hasError = (controlName: string, errorName: string) =>
      return this.Addform.controls[controlName].hasError(errorName);
    

   // submit function
   submit(Addform) 
      if (this.Addform.invalid)  
      // if condition to check the form group validation.
      // show validation alert here.
         return;
     

      this.submitted = true;
      // add you success code here.

   

【参考方案2】：

您可以在 Angular Material (MatFormFieldModule) 的帮助下进行两种验证（在提交按钮上显示带有错误消息的所有错误和单独的错误消息）。 经过长时间的研发，我的问题得到了解决，但首先您将了解角材料。

示例代码：-

<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value,loginForm)"> 
 <mat-form-field>
    <input matInput placeholder="Enter your email" formControlName="email">
      <mat-error *ngIf="loginForm.controls['email'].hasError('required')">Required</mat-error>
      <mat-error *ngIf="loginForm.controls['email'].hasError('email')">Invalid Mail</mat-error>
 </mat-form-field>
</form>

login.ts 文件代码：

private createLoginForm() 
  this.loginForm = this.fb.group(
    email: new FormControl('', [Validators.required, Validators.email]),
  )
  

您可以根据需要附加更多验证器。

【参考方案3】：

（反应形式）

有问题我的解决方案是：

-- 模板

<button type="button" (click)="f.ngSubmit.emit(f)">Submit From Outside 
form</button>

<form novalidate #f="ngForm" (ngSubmit)="save($event)" 
[formGroup]="MyformGroup">
...
</form>

-- 类

@ViewChild('f') f: FormGroupDirective;

submit(formDirective: FormGroupDirective) 
  console.log('valid', formDirective.valid);
  console.log('value', formDirective.value);

这是我用来提交表单的解决方案，其中包含一些不在表单中的按钮。

谢谢

【讨论】：

如果您的提交按钮在表单之外，请使用表单属性 form="myform" >Submit

我知道）这是反问

【参考方案4】：

每次更改模型时都应执行验证。但也许您看不到错误消息，因为 FormControl 未被触及？ 这是我的解决方案，效果很好。

我通过以下简单的步骤做到了：

实现一个注入 formGroupDirective 的 FormComponent（选择器“form”）（订阅提交事件并将提交设置为 true）

@零件（ 选择器：'表格'， templateUrl: 'form.component.html', styleUrls: ['form.component.scss'] ) 导出类 FormComponent 实现 OnInit @Output() 提交 = 新的 EventEmitter(); 构造函数（@Optional（）私有 formGroupDirective：FormGroupDirective） ngOnInit() 如果（this.formGroupDirective） this.formGroupDirective.ngSubmit.subscribe(() => this.formGroupDirective.form['submitted'] = true; );

重要的行在ngOnInit中

检查提交的表单以显示错误

*ngIf="control?.hasError('required') && (control?.touched || form?.submitted)"

希望有帮助

【参考方案5】：

如果您使用的是模板驱动表单，则可以使用以下语法：

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <button type="submit">Save</button>
</form>

.ts

add(isValid: boolean)
   if(isValid)
       //do something
   

您还可以像这样在提交时添加一些错误：

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <label>Name</label>
    <div>
        <input [(ngModel)]="name" name="name" #name="ngModel" required>
    </div>
    <div[hidden]="name.valid || (name.pristine && !f.submitted)">
        <small class="text-danger">Please input name</small>
    </div>
    <button type="submit">Save</button>
</form>

【讨论】：

感谢您的帮助，但我使用的是模型驱动方法，因为我的表单是动态创建的。问题是验证似乎有效，但未显示错误。

可能您已将验证设置为在表单被触摸/弄脏时显示等。如果您提交一个空表单，验证将不会显示，因为它仍然“未触及”。我还没有找到解决办法。

感谢您的帮助。