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

Question

我在对单选按钮应用验证时遇到麻烦，在其他输入类型上，我通常只是在输入上创建#templateRefVariable，然后可以访问 NgControl，它允许我使用诸如控件的 Touched 属性之类的东西.

我当前想要实现的是根据组中的任何单选按钮是否被触摸来设置 div 的 Touched 属性。 (由于 css 依赖关系，将其设置在 div 中，如果它不在外部 div 中，则验证将不会显示)，但 typeCode 始终未定义。

<div class="form-group">
    <label>Label</label>
    <div class="btn-group btn-group-toggle w-100"
        [class.ng-invalid]="!viewmodel.typeCode"
        [class.ng-touched]="typeCode?.touched">
        <label *ngFor="let domain of types" 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>
    <validation-message *ngIf="!viewmodel.typeCode"
        [message]="'Required'"></validation-message>
</div>

对于无效，我可以通过使用 View 模型中的信息来解决它，以查看它是否已设置，但有关触摸的信息不在 View 模型中。

我不能对 ng-touched 做同样的事情，因为当尝试提交表单时我需要设置touched(即使输入实际上没有被触摸)。

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

P.S:使用模板驱动表单

按照要求的 StackBlitz(注意控制台上的错误，因为 typeCode 未定义): https://angular-5vqi5c.stackblitz.io

Answer 1

这是因为 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>

PS。我还没有测试过上面的代码。