I have created a common component. I am stuck in a problem where I am using angular material and using mat-form-field. I am using @if in angular 18 to check for a condition then mat-error is working fine. But when I am using @for it is not working and mat-error is showing inside input field not in mat-error. Also I need put my condition like this:
Above is the required format I am looking for. But I tried using single @if and @for as well. But @for is not working.
Here is the output when I am using @for:
- First Image shows that error is coming inside a inputFor loop output when using with mat-error
@if(condition){
@for(condition){
<mat-error>{{error}}</mat-error>
}
}```
<mat-form-field>
<mat-label >{{label}}</mat-label>
<input matInput [ngClass]="{'is-invalid': this.formGroup.get(controlName)?.invalid && this.formGroup.get(controlName)?.touched}" [formControlName]="controlName" (focus)="triggerValidation(controlName)" [required]="required" [type]="type" [placeholder]="placeholder">
@if(formGroup.get(controlName)?.invalid && formGroup.get(controlName)?.touched){
@for(error of getErrorMessages(controlName); track i; let i = $index){
<mat-error> {{ error }} </mat-error >
}
}
</mat-form-field>
I tried using ng-container. But for now ng-container is of no use as we have @if and @for block.
I am looking for below output using @if and @else:
1) Here is the output of my image:
Expected Output, currently I have used only @if so I am getting this output
[![Output using @if condition only][1]][1]
[1]: https://i.sstatic.net/XUSUxJcg.png
Tirth shah is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.