Iam facing the issue that mat-form-field required asterik even if there is no error. I would like to show blue asterik if there is no error. I have spent a lot of time but I am not able to fogure it out. If anyone knows what is wrong then please let me know. Thank you
<mat-form-field appearance="outline" class="input-field-large input-normal-wide" matInput>
<mat-label>Name</mat-label>
<input
(input)="onNameChange()"
formControlName="name"
type="text"
autocomplete="off"
matInput
maxlength="50"
required="required"
/>
<mat-icon
*ngIf="form.hasError('required', 'name') && isNameSubmitted"
class="mdi mdi-24px mdi-alert-circle"
matSuffix
>
</mat-icon>
<mat-error *ngIf="form.hasError('required', 'name') && isNameSubmitted">
<span>{{ "This field is mandatory" | translate }}</span>
</mat-error>
<mat-error *ngIf="form.hasError('maxlength', 'name') && isNameSubmitted">
<span>{{ "Maximum 50 charachers are allowed" | translate }}</span>
</mat-error>
</mat-form-field>Since you're using a form field with formControlName directive i guess you have a formGroup, if you just want to make sure the input has a value don't use required directly on the template, instead use Validators in the .ts file of your component.
For example:
public myFormGroup: FormGroup = new FormGroup({
name: new FormControl('', Validators.required)
})
In the FormControl constructor you can pass, as the second parameter, a validator function or an array of validator functions. The required function is one of them, addional pre-defined validators are:
and more.
You can also define a custom function if you need it tho
If you want to change the color of the "*", add this .css to your "styles.css" (not in the component.css)
.mat-focused .mat-form-field-required-marker
{
color:blue
}
.ng-invalid.ng-touched.mat-focused .mat-form-field-required-marker
{
color:red
}
In only want to hide the "*" you use
[required]="form.hasError('required','name')?true:null"
See the stackblitz