Validation for dynamically generated reference Template Driven Angular

Issue

I am creating a dynamic form, I am going through my own way through template driven, I don’t want to create with the reactive approach. Everything is working fine but only validations are creating a problem for me. I have uploaded a small piece of code of my project

  <ng-container *ngFor="let a of UserFormArray; let i = index">
   <form #f="ngForm" name="FormName">
    <ng-container *ngFor="let ab of a; let i2 = index">
      <ng-container *ngIf="ab.type === 'text'">
        <input type={{ab.type}} pInputText name={{ab.name}} ngModel 
                                     #{{ab.name}}="ngModel" required>
           <ng-container *ngIf="ab.name.errors?.required">
                    <div>
                        Input Error
                    </div>
           </ng-container>
      </ng-container>
    </ng-container>
  </form>
 <p-button label="Click" (onClick)="sender(f)"></p-button>
</ng-container>

The problem is that I am not able to put validation here, I am using the template-driven approach and I don’t want to go for reactive form so please don’t suggest the reactive link, it’s my requirement to go with template driven, I know I am missing the small thing. But not able to figure it out

Solution

You can create template reference variable dynamically but you should know that this variable is unique within embedded view.

So propably you’re looking for the following:

<input ... #ngModel="ngModel" required>
    <ng-container *ngIf="ngModel.errors?.required">

Ng-run Example

Answered By – yurzui

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.