使用Angular中的Renderer2动态绑定指令

Question

我正在尝试使用Renderer2在HTML上呈现以下内容

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

以上是文本框的必填字段验证，但“ div”需要动态呈现。我目前正在使用以下代码。

 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)");

代码抛出错误

无法在'Element'上执行'setAttribute'：'* ngIf'是无效的属性名称。