开发Azure DevOps Boards扩展时如何在工作项字段显示红色警告图标

你可以直接调用Azure DevOps官方提供的工作项表单客户端API实现该需求，不需要手动操作DOM注入图标，原生表单会自动渲染对应的红色警告标识。

前置依赖 #

确保你的扩展已经引入了VSS Web Extension SDK，且manifest.json中已经配置了工作项表单的相关权限与贡献点。

具体实现步骤 #

• 第一步：获取工作项表单服务实例
  通过SDK引入工作项跟踪服务模块，获取当前激活的工作项表单实例：

VSS.require(["TFS/WorkItemTracking/Services"], function (WorkItemTrackingServices) {
  WorkItemTrackingServices.WorkItemFormService.getService().then(function (workItemFormService) {
    // 后续逻辑都基于该workItemFormService实例实现
    window.workItemFormSrv = workItemFormService;
  });
});

• 第二步：当自定义校验条件触发时，调用setFieldError方法设置字段错误状态
  该方法会自动在对应字段旁渲染红色警告图标，同时支持传入hover时显示的错误提示：

// 示例：当优先级字段为空时设置必填错误
const requiredField = "System.Priority";
if (await workItemFormSrv.getFieldValue(requiredField) == null) {
  // 第一个参数为字段引用名，第二个参数为自定义错误提示文本
  await workItemFormSrv.setFieldError(requiredField, "该字段为必填项，请完成填写后保存");
  // 你已实现的禁用保存按钮、全局错误提示逻辑可以放在这里同步执行
} else {
  // 校验通过时清除错误状态，图标会自动消失
  await workItemFormSrv.clearFieldError(requiredField);
}

• 第三步：绑定事件监听触发校验逻辑
  你可以将上述校验逻辑绑定到表单加载完成事件、字段值变更事件上，实现动态校验：

// 监听字段值变更事件触发校验
workItemFormSrv.addFieldChangedListener(async (_, args) => {
  // 调用自定义校验逻辑
  await validateRequiredFields();
});

注意事项 #

• 传入的字段标识必须是工作项字段的引用名称，不是前端显示的友好名称，例如System.Title、Microsoft.VSTS.Common.Severity
• 同一时间可以给多个字段分别设置不同的错误提示，互相不会干扰
• 如果要全局清除所有字段的错误状态，可以遍历你自定义的必填字段列表，循环调用clearFieldError即可

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