Angular 2：未使用form标签时，如何通过FormControl阻止必填项提交

我明白你的困扰——没有用<form>包裹输入框，单独用FormControl做必填校验时，点击提交按钮还是会执行提交逻辑，根本拦不住。这是因为Angular的自动表单拦截机制依赖于<form>标签和ngSubmit指令，没有这些的话，得手动在提交方法里做校验判断才行。

下面给你两种可行的解决方案，按需选择：

方案一：手动校验FormControl状态（推荐，符合Angular响应式表单思路） #

在你的submitHomeDelivery方法里，先检查deadlineVal的有效性，如果无效就终止提交流程，同时标记控件为已触碰，让用户看到错误提示：

deadlineVal: FormControl = new FormControl('', [Validators.required]);

submitHomeDelivery() {
  // 标记控件为已触碰，触发校验状态更新（方便显示错误提示）
  this.deadlineVal.markAsTouched();

  // 如果控件不符合校验规则，直接返回，阻止提交
  if (this.deadlineVal.invalid) {
    console.log('请填写必填的截止日期');
    return;
  }

  // 走到这里说明校验通过，执行你的提交逻辑
  console.log('提交逻辑执行中...');
  // 你的提交代码写在这里
}

要是你想给用户更直观的错误提示，可以在HTML里加一段错误显示：

<div class="dead-line">
  <span class="p-gap">To delivery in this period I want to recevive orders until 
    <a (click)="deadlineTime(i)" class="del-r">
      <input type="date" class="form-control hide-dt" [formControl]="deadlineVal" required> 
      {{i.dead_line_time}}
    </a>
    <!-- 显示必填错误 -->
    <span *ngIf="deadlineVal.invalid && deadlineVal.touched" style="color: red;">
      截止日期为必填项
    </span>
  </span>
</div>
<button class="bt-save" (click)="submitHomeDelivery()">Save</button>

方案二：利用原生表单校验 #

如果不想依赖Angular的FormControl校验，也可以直接调用输入框的原生校验方法：

submitHomeDelivery() {
  // 获取输入框元素
  const deadlineInput = document.querySelector('.hide-dt') as HTMLInputElement;
  
  // 检查原生有效性，无效则显示浏览器自带的提示并终止提交
  if (!deadlineInput.checkValidity()) {
    deadlineInput.reportValidity();
    return;
  }

  // 校验通过，执行提交逻辑
  console.log('提交逻辑执行中...');
}

这个方法不需要FormControl，直接用原生HTML的required属性就能触发校验，但缺点是样式和提示内容受浏览器限制，不如Angular的响应式表单灵活。

为什么之前的代码拦不住提交？ #

因为没有<form>标签时，Angular不会自动拦截点击事件，FormControl只是帮你管理控件状态，但不会主动阻止提交操作——你得自己在提交方法里加判断逻辑才行。

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