Angular 2响应式表单非必填字段验证异常问题求助

嘿，我明白你遇到的问题了——comment字段输入短内容时虽然显示了错误提示，但提交按钮还是能点对吧？这是因为你还没给comment字段加上对应的条件验证规则，导致表单没把这个错误算进整体的有效性判断里，自然不会禁用提交按钮。

我给你一步步解决：

1. 给comment字段添加条件验证器 #

你需要给comment字段加一个自定义验证器，逻辑很简单：只有当用户输入了内容时，才检查字符串长度是否至少10个字符。修改你的表单构建代码如下：

return this.formBuilder.group({
  'surveyDueDate': ['', Validators.required],
  'rfsDueDate': [null, Validators.required],
  'comment': [null, [
    (control: AbstractControl) => {
      // 先去掉首尾空格，避免用户输入全空格的无效内容
      const value = control.value?.trim();
      // 有内容且长度不足10时返回错误标记
      if (value && value.length < 10) {
        return { commentMinLength: true };
      }
      // 没有错误就返回null
      return null;
    }
  ]]
});

2. 确保模板中的错误提示和验证状态关联 #

在模板里，你可以通过控件的errors属性来判断是否显示错误提示，建议加上touched判断，避免页面刚加载就弹出错误：

<div class="error-tip" *ngIf="myForm.get('comment')?.touched && myForm.get('comment')?.errors?.commentMinLength">
  评论内容长度至少为10个字符哦
</div>

3. 绑定提交按钮的禁用状态 #

最后一定要确保提交按钮的disabled属性绑定到表单的invalid状态，这样只要表单里有任何验证不通过的字段，按钮就会自动禁用：

<button type="submit" [disabled]="myForm.invalid">提交表单</button>

这样修改后，当你在comment字段输入少于10个字符的内容时，该控件会被标记为无效，整个表单的invalid状态变为true，提交按钮就会被禁用啦。

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