Ссылочная переменная шаблона не определена в переключателях

Question

У меня проблемы с применением проверок на переключателях в angular, на других типах ввода, я обычно просто создаю #templateRefVariable на входе и затем могу получить доступ к NgControl, который позволяет мне использовать такие вещи, как свойство трогания the control.

То, чего я сейчас пытаюсь достичь, это установить свойство touch в div в соответствии с тем, была ли нажата какая-либо из радиокнопок в группе. (установка его в div из-за зависимостей css, если его нет в этом внешнем 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>

С недопустимым я могу обойти это, используя информация в модели представления, чтобы увидеть, была ли она уже установлена, но информация о касании отсутствует в модели представления.

И я не могу сделать то же самое для ng-touch, потому что мне нужно установить touch, когда есть попытка отправить форму (даже если ввод не был фактически затронут).

Есть идеи, почему typeCode (templateVariableRef) не определен при использовании его в переключателях? Я подозреваю, что это может быть из-за наличия нескольких на странице, но я не уверен.

PS: Использование шаблонно-управляемых форм

StackBlitz по запросу (обратите внимание на ошибки на консоли из-за неопределенности typeCode) : https://angular-5vqi5c.stackblitz.io

Answer 1

Это потому, что ngFor является структурной директивой и создает вложенный шаблон, и, следовательно, эти переменные шаблона выходят за рамки.

Будет ли перемещение вашей логики c внутри 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. Я не проверял код выше.