如何在Angular 5中提交无需验证的响应式表单？

当然可以！Angular响应式表单本身并没有强制拦截未通过验证的表单提交，所谓的“默认行为”大多是我们自己在模板或组件逻辑里加入了基于表单验证状态的限制。下面给你两种实用的解决方案：

1. 完全绕过验证状态，直接提交数据 #

最直接的方式就是不依赖表单的valid状态来控制提交逻辑，不管验证结果如何都执行提交操作。

组件代码示例： #

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { YourApiService } from './your-api.service';

@Component({
  selector: 'app-your-form',
  templateUrl: './your-form.component.html'
})
export class YourFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private apiService: YourApiService) {
    this.myForm = this.fb.group({
      username: ['', /* 保留验证规则，但不影响提交 */],
      email: ['', /* 保留验证规则 */]
    });
  }

  onSubmit() {
    // 直接获取表单值，忽略验证状态
    const submitData = this.myForm.value;
    
    // 调用API提交数据
    this.apiService.sendData(submitData).subscribe({
      next: (response) => {
        console.log('提交成功:', response);
      },
      error: (err) => {
        console.error('提交失败:', err);
      }
    });
  }
}

模板代码示例： #

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input formControlName="username" placeholder="用户名">
  <!-- 保留验证提示，用户输入错误时依然能看到 -->
  <div *ngIf="myForm.get('username')?.invalid && myForm.get('username')?.touched">
    用户名格式不正确
  </div>

  <input formControlName="email" placeholder="邮箱">
  <div *ngIf="myForm.get('email')?.invalid && myForm.get('email')?.touched">
    邮箱格式不正确
  </div>

  <!-- 移除 [disabled]="!myForm.valid" 这个限制按钮的属性 -->
  <button type="submit">提交表单</button>
</form>

2. 保留验证提示，但允许提交 #

如果你想让用户看到错误提示，同时又允许提交表单，可以先标记所有控件为“已触摸”（触发验证提示显示），再执行提交：

onSubmit() {
  // 标记所有控件为已触摸，让验证错误提示显示出来
  this.myForm.markAllAsTouched();
  
  // 直接提交数据，无视验证结果
  const submitData = this.myForm.value;
  this.apiService.sendData(submitData).subscribe(...);
}

重要提醒 #

虽然前端可以绕过验证提交，但一定要确保后端也做了完整的数据校验。前端验证只是为了提升用户体验，后端校验才是防止脏数据入库的核心保障。

内容的提问来源于stack exchange，提问作者CodeHip