Javascript 单选按钮中未定义模板引用变量

我在angular和其他输入类型的单选按钮上应用验证时遇到问题，我通常只在输入上创建#templateRefVariable，然后就可以访问NgControl，它允许我使用控件的触摸属性之类的东西

我现在想做的是根据组中的任何单选按钮是否被触摸来设置div的toucted属性。（在div中设置它是因为css依赖关系，如果它不在外部div中，验证将不会显示），但是typeCode总是未定义的

标签
{{domain.description}}

使用invalid，我可以使用视图模型中的信息查看它是否已设置，但触摸的信息不在视图模型中

我不能对ng Touch做同样的操作，因为我需要在有atempt提交表单时设置Touch（即使输入没有实际触摸）

知道为什么在单选按钮中使用typeCode（templateVariableRef）时未定义它吗？我怀疑这可能是因为页面中有多个，但我不确定

附言：使用模板驱动的表单

按要求进行StackBlitz（注意控制台上的错误，因为类型代码未定义）：

---

这是因为ngFor是一个结构指令，创建了一个嵌套的模板，因此这些模板变量超出了范围

将您的逻辑移动到ngFor中是否是您的一个选择，例如

<div class="btn-group btn-group-toggle w-100"
     [class.ng-invalid]="!viewmodel.typeCode">
  <ng-container *ngFor="let domain of types">
    <div [class.ng-touched]="typeCode?.touched>
      <label class="btn btn-toogle"
             [class.active]="domain.code==viewmodel.typeCode">
        <input type="radio" [(ngModel)]="viewmodel.typeCode"
            #typeCode="ngModel" name="typeCode"
            [value]="domain.code">
        {{domain.description}}
      </label>
    </div>
  </ng-container>
</div>

@切拉潘வ 使用stackblitz编辑您可以共享可编辑的stackblitz链接吗？不幸的是，不，该div所做的实质是制作一组放置在收音机上的可切换按钮。但这是因为范围界定的信息已经帮助我至少了解了原因。感谢you@Amgg你仍然可以将你的btn组div放在外面，只需尝试将ng移到里面，就可以改变css的应用方式？仅供参考，稍微修改了我的示例