如何在Angular 7的FormIO中隐藏指定的alert-danger提示？

针对你在Angular 7中使用FormIO时，想隐藏Societe字段验证不通过时出现的“Societe est obligatoire”提示的需求，这里有几个可行的解决方案：

方案一：通过字段配置自定义/移除验证提示 #

你可以直接在Societe字段的validate配置中，修改requiredMessage属性来控制提示内容，甚至设置为空字符串来隐藏它：

form = { 
  components: [
    { 
      type: "textfield", 
      input: true, 
      tableView: true, 
      inputType: "text", 
      inputMask: "", 
      label: "Societe", 
      key: "societe", 
      placeholder: "societe", 
      multiple: false, 
      defaultValue: "", 
      protected: false, 
      unique: false, 
      persistent: true, 
      validate: { 
        required: true, 
        minLength: 1, 
        pattern: "", 
        custom: "", 
        customPrivate: false,
        // 设置为空字符串，移除默认提示
        requiredMessage: "" 
      }, 
      conditional: { show: "", when: null, eq: "" } 
    },
    { 
      input:true, 
      label:"Validate", 
      tableView:false, 
      key:"ValidateFournisseur", 
      size:"md", 
      block:false, 
      action:"submit", 
      disableOnInvalid:true, 
      theme:"primary", 
      type:"button", 
      hidden:false 
    }
  ]
};

这种方法直接从配置层面控制提示，不会影响其他字段的验证提示。

方案二：通过CSS精准隐藏特定字段的错误提示 #

如果你不想修改表单配置，也可以通过CSS选择器定位到Societe字段对应的错误提示元素，将其隐藏：

在你的form-io.component.css文件中添加以下样式：

/* 定位到Societe字段的错误提示并隐藏 */
.formio-component-textfield[data-key="societe"] .alert-danger {
  display: none !important;
}

这个方法的好处是不需要改动表单的逻辑配置，只是通过样式层面隐藏指定提示，适合快速解决需求。

注意事项 #

• 如果你选择方案一，要确保FormIO的版本支持requiredMessage属性（Angular 7对应的FormIO版本应该是支持的）；
• 方案二中的!important是为了覆盖FormIO的默认样式优先级，确保隐藏生效；
• 即使隐藏了提示，字段的必填验证逻辑依然会生效（因为你保留了validate.required: true），提交按钮依然会在字段为空时保持禁用状态（你设置了disableOnInvalid: true），不会影响表单的验证逻辑。

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