3

I'm trying to get the following rendered on my HTML using Renderer2

<div class="text-danger" *ngIf="valForm.controls['email'].hasError('required') && (valForm.controls['email'].dirty || valForm.controls['email'].touched)">This field is required</div>

Above is a required field validation for a textbox but the "div" needs to be rendered dynamically. I'm using below code at the moment.

 const validator_div = this.renderer.createElement('div');
 this.renderer.addClass(validator_div, 'text-danger');
 validator_div.innerHTML = "This field is required";

 this.renderer.setAttribute(validator_div, "*ngIf", "valForm.controls['formControlName'].hasError('required') && (valForm.controls['formControlName'].dirty || valForm.controls['formControlName'].touched)");

Code throws an error

Failed to execute 'setAttribute' on 'Element': '*ngIf' is not a valid attribute name.

chamara
  • 12,649
  • 32
  • 134
  • 210
  • look to this post maybe it can help you[Similar question](https://stackoverflow.com/questions/49963469/assigning-angular-structural-directives-during-runtime) – Artur T Jan 08 '20 at 06:28

0 Answers0