HTML（用于角度）验证 - 具有 name 和 id 属性的不同行为

问：

我试图在编写代码时尽可能干净。我的 IDE 是 IntelliJ（终极版），我在提交/推送之前激活了验证。我在那里遇到了一个奇怪的行为，即在为输入名称属性提供串联时无法通过验证，而 id 属性没有引发任何问题：

        <div *ngFor="let item of commandBuilder.items; let y = index">
            <input clrInput style="..."
                   type="text"
                   pattern="0[xX][0-9a-fA-F]+"
                   [(ngModel)]="item.hexaValue"
                   id="{{item.name + 'hexInput'}}"
                   name="{{item.name + 'hexInput'}}" />
        </div>

在名称行上引发了 3 个错误：

• 字符 31（紧 item.name 之前）：应为标识符或字符串文本或数字文本
• 字符 36： ： 或 ， 预期
• 字符 37：：预期

为了提供更多的上下文，以下是 ts 文件的相关部分：

   commandBuilder = { } as CommandBuilder;

以及接口的相关部分：

export interface CommandBuilder {
  items: CommandDetailItem[];
}

export interface CommandDetailItem {
  name: string;
}

知道我如何通过验证或解释为什么它对 name 属性而不是 id 属性这样做吗？