Angular 8 шаблон с вводом со ссылкой на шаблон переменной

Question

У меня есть приложение Angular 8 с множеством пользовательских входов и пользовательских сообщений проверки под каждым входом. Я хочу оптимизировать все компоненты и их ввод, выбрать, установить флажки для использования шаблона вместо большого количества дублированного кода:

<div class="component-atom sp-form-item">
                <label class="sp-form-label" for="user-first-name">First Name</label>
                <div class="sp-form-item error-input">
                  <div class="sp-form-group">
                    <input id="user-first-name" [(ngModel)]="userData.firstName" name="userFirstName" type="text"
                      class="sp-text-input details-input form-control" placeholder="First Name" required
                      #userFirstName="ngModel">
                    <button class="clear-icon" type="button"><i class="sp-icon-close"></i></button>
                  </div>
                  <div *ngIf="isInvalid(userFirstName)" class="sp-form-requirement">
                    <i class="sp-icon-error input-error-icon"></i><span class="error-message">Required</span>
                  </div>
                </div>
              </div>

И до сих пор у меня есть этот шаблон, который работает нормально:

<div class="component-atom sp-form-item">
  <label class="sp-form-label" [for]="inputID">User ID</label>
  <div class="sp-form-group">
    <input [id]="inputID" [readonly]="readonly" [(ngModel)]="modelObject" [name]="modelName" [type]="inputType"
      class="sp-text-input details-input form-control" [placeholder]="placeholder" [required]="required" >
    <button class="clear-icon" type="button"><i class="sp-icon-close"></i></button>
  </div>
</div>

Но теперь у меня есть проблема с этой частью # userFirstName = "ngModel", также известной как ссылки на переменные шаблона https://angular.io/api/forms/NgModel#template -variable-reference

Это необходимо для *ngIf="isInvalid(userFirstName), где:

isInvalid(control: NgModel) {
    return control.invalid && control.touched;
}

Я также не уверен, возможно ли это в angular, но я хочу добавить, например, # {{dynamicName}} = "ngModel". Я открыт для альтернатив. Все значения Dynami c будут уникальными, но я не смог найти правильный синтаксис для реализации # userFirstName = "ngModel" в шаблоне, где userFirstName уникален.