Recibo typeError aquí <p *ngIf="formValue.controls['{{obj.name}}'].invalid pero cuando codifico duro como este *ngIf="formValue.controls['uname'].invalid funciona multa.
¿Cuál es el problema aquí?
<span *ngFor="let obj of toolData"> <span [ngSwitch]="obj.type"> <span *ngSwitchCase="'text'"> <label for="{{obj.name}}">{{obj.label}}</label> <input type="text" id="{{obj.name}}" name="{{obj.name}}" formControlName="{{obj.name}}" value="{{obj.value}}" required="{{obj.required}}" /> <p *ngIf="formValue.controls['{{obj.name}}'].invalid && formValue.controls['{{obj.name}}'].touched" class="text-danger">Value required</p> </span> </span> </span>ToolData
toolData=[ {"type":"text","name":"uname","label":"User Name","value":"user name","required":true}, {"type":"number","name":"pval","label":"P val","value":"3","min":0,"max":100,"required":true}, ]ngIf evalúa la expresión escrita dentro de eso. No tienes que usar la interpolación de cadenas allí. Use la expresión como se muestra a continuación.
Este jsfiddle mostrará una implementación de muestra.
Debería ser
*ngIf="formValue.controls[obj.name].invalid && formValue.controls[obj.name].touched"Así será tu plantilla.
<span *ngFor="let obj of toolData"> <span [ngSwitch]="obj.type"> <span *ngSwitchCase="'text'"> <label for="{{obj.name}}">{{obj.label}}</label> <input type="text" id="{{obj.name}}" name="{{obj.name}}" formControlName="{{obj.name}}" value="{{obj.value}}" required="{{obj.required}}" /> <p *ngIf="formValue.controls[obj.name].invalid && formValue.controls[obj.name].touched" class="text-danger">Value required</p> </span> </span> </span>