Question

我创建了一个带有角度2的表单，并添加了一些客户验证器。现在我想在用户点击提交按钮时触发表单验证。在我到目前为止发现的示例中，只要表单无效，我就会禁用提交按钮，但我希望始终启用提交按钮，当用户点击提交时，表单应该被验证。有谁知道我怎么能做这个工作，我应该使用哪种打字方法？我找到了updateValueAndValidity方法，但似乎无法使用此方法。

Answer 1

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

$appointment = new Appointment();
// ...
$em->persist($appointment);

.TS

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

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

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

Answer 2

每次更改模型时都应执行验证。但也许你看不到错误信息，因为FormControl没有受到影响？这是我的解决方案，工作正常。

我是通过以下简单步骤完成的：

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


    @Component({
        selector: 'form',
        templateUrl: 'form.component.html',
        styleUrls: ['form.component.scss']
    })
    export class FormComponent implements OnInit {
        @Output() submit = new EventEmitter();

        constructor(@Optional() private formGroupDirective: FormGroupDirective) {
        }

        ngOnInit() {
            if (this.formGroupDirective) {
                this.formGroupDirective.ngSubmit.subscribe(() => {
                    this.formGroupDirective.form['submitted'] = true;
                });
            }
        }

    }

重要的行在ngOnInit

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

* ngIf =“control？.hasError（'required'）＆amp;＆amp;（control？.touched || form？.submitted）”

希望有所帮助

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

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

由于

Answer 4

您可以借助 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]),
  })
}

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

Answer 5

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

<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.

   }

}

提交时的Angular 2触发器表单验证

5 个答案: