Angular Material Help Required

[Chetan Ganji]

Hi, 

I was hoping someone could help me with this. I know this is not angular group :P 

Requirement: errors should be displayed just after the mat-label. 

Problem: mat-error is always displayed below the matInput in angular material theme. It doesnt matter in which order I write the markup, errors are always displayed below the input. 

Solution: 

1. mat-errors need to be made inline in the css, I found the css code that will make this change. 

2. mat-error are always subscripted to matInput - I need help with this. 

I want to understand how this happens in the framework and how to stop this default behaviour. 

I have looked into the source code, but could not find the code responsible for this.

This change needs to be done project wide. Please suggest a solution that's ideal. 

One solution would be to extend the default angular/material directives and make the changes in those and import extended directives instead of the default directives.

Is there a better way to do this?

Thanks in advance! 

My code in theme pages

<mat-form-field>

<mat-label>First name </mat-label>

<mat-error *ngIf="signUpForm.get('first_name').hasError('required')"> is required </mat-error>

<input id="name" matInput [formControlName]="'first_name'" />

</mat-form-field>

I think below code is the markup of errors

https://github.com/angular/components/blob/acb3f33413b92cc326f51a1db8b43e4a8094d745/src/material/form-field/form-field.html#L74

<div class="mat-form-field-subscript-wrapper" [ngSwitch]="_getDisplayedMessages()">

<div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">

<ng-content select="mat-error"></ng-content>

</div>

...

</div>

Regards,

Chetan Ganji

+91-900-483-4183

ganji....@gmail.com

http://ryucoder.in