Develop Reference

How to display max limit error message without using ts file in angular?

I want to show error message like required error message for max input limit but using below code it work for required but not for maxlength . I also not to use ts file . Is there any way to achieve this. Thanks
<form #featureForm="ngForm">
<mat-form-field class="featureInputForm" appearance="fill">
<mat-label>Feature Namre</mat-label>
<input matInput [(ngModel)]="featureName" required name="featureName" maxlength="64" (ngModelChange)="moduleNameChange($event)" />
<mat-error *ngIf="featureForm.controls['featureName']?.errors?.required">Feature Name is required.</mat-error>
<mat-error *ngIf="featureForm.controls['featureName']?.errors?.maxlength">Maximum limit exceed.</mat-error>
</mat-form-field>
</form>

According to documentation for HTML attribute: maxlength, the browser will generally prevent the user from entering more text than the maxlength attribute allows. This explains why you don't see the error message when typing into the input.
However, if the value is longer than the maxlength on the .ts side of things, then the code you have will render the error text. For instance assuming maxlength=10 and if featureName = '12345678901' <- string is longer than maxlength so error message would render on the page.
See this stackblitz for an example.

There are two approaches to this.
1. Use reactive forms approach
2. Use template forms approach
As per your requirement, you don't want to use the .ts file for validation.
Then you can proceed with template-driven forms in angular rather than proceeding with the reactive forms-driven approach. Reactive Forms driven approach mainly deals with forms of validation-related logic in the .ts file itself. While in the template-driven approach it does handle the logics in the template itself.
For further reading on reactive-forms in angular
For further reading on template-forms in angular
Please refer to the code block below :
<form #featureForm="ngForm">
<mat-form-field class="featureInputForm" appearance="fill">
<input matInput name="featureName" [ngModel]="featureName" maxlength="10" #featureName="ngModel" required>
<div *ngIf="featureName.errors" [ngClass] = "'error'">
<div *ngIf="featureName.errors.maxlength">
Name must be at least 10 characters long.
</div>
<div *ngIf="featureName.errors.required">
featureName is required.
</div>
</div>
</mat-form-field>
</form>

Input of type password is blocking backspace key only on Safari

I am having problems with input of type password which is blocking user's to press the backspace key and so he can't erase caracters. Strange thing, it is also blocking the email input above.
However, when I change the type of the password input to text, everything is working fine.
I am using :
Angular 8.2.14
Angular Material 8.2.3
Safari 13.1
The npx browserslist command output safari 13,safari 12.1 for the projet.
Here's what the code is looking like :
<mat-card *ngIf="!loading">
<mat-card-title>
{{"LOGIN" | translate}}
</mat-card-title>
<mat-card-content>
<form (ngSubmit)="valid()">
<mat-form-field>
<input matInput [placeholder]="'EMAIL_ADDRESS' | translate" [(ngModel)]="email" name="email"/>
</mat-form-field>
<mat-form-field>
<input type="text" matInput [placeholder]="'PASSWORD' | translate" [(ngModel)]="password" name="password"/>
</mat-form-field>
<div>
<mat-checkbox [(ngModel)]="rememberMe" name="rememberMe">{{'REMEMBER_ME' | translate}}</mat-checkbox>
</div>
<div>
<a [routerLink]="'/forget'">{{ 'PASSWORD_FORGET' | translate }}</a>
</div>
<button class="margined" mat-raised-button color="primary"> {{"SUBMIT" | translate}}</button>
</form>
</mat-card-content>
</mat-card>
I've tried to remove all the content related to the Angular Material library, it doesn't seem to solve the problem.

The answer was to delete this tiny line of css
input { -webkit-user-select: all!important; }
Everything is working fine now. Sorry for the inconvenience, it was my fault.

Change behavior of input type time in chrome

How do you change the behaviour of the input type=time in order to change the minutes before the hours in chrome and opera using the provided arrows. (the problem isn't present in firefox or edge as the user interface doesn't provide the same controls)
I'm using Angular 9 if it helps
<mat-form-field>
<input matInput type="time" min="0" step="1800">
</mat-form-field>

You can desactivate the arrows
input[type='time']::-webkit-inner-spin-button {
display: none;
}
or you can build your own time input

matInput placeHolder does not print text

I am relatively new to Angular and I couldn't find any solution to the following problem.
I have the following code:
<mat-form-field>
<input matInput placeholder="ZIP" style="color:red;">
</mat-form-field>
I want it to write the word ZIP in red, but all it does is showing a red cursor, and the word zip is still grayed out.
This works perfectly when working with input, and not with matInput.
Does anybody know how can it be solved?
Thanks!

Try this way :
<mat-form-field class="example-full-width">
<mat-label style="color: red">Zip</mat-label>
<input matInput>
</mat-form-field>
Live example :
https://stackblitz.com/edit/angular-rkewwm?file=app/input-overview-example.html
(Don't forget to upgrade your package #angular/material, v5 min if I'm not mistaken)

Angular 4: mismatch input fields with error message

I want to compare password field and confirm password without creating a new directive, just using ngModel and HTML. I have a submit button blocked if the passwords don't match, and thats working fine. But I want to show a span error message when the user is retyping (or on submit) and so far, right after the first input on the password field (when the retype is empty) I get the error message. It's logical, with the code I have, but I wonder if it's possible to have a better UX without using validators or directives? I've tried several aproaches but nothing worked...Any hint would be appreciated. The code:
<form #confirm="ngForm" novalidate>
<mat-form-field class="full-width">
<input matInput type="password" id="password" placeholder="New Password" name="password"
[(ngModel)]="loginValues.password" required>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput type="password" id="confirmPassword" placeholder="Retype Password" name="confirmPassword"
[(ngModel)]="loginValues.confirmPassword" required>
</mat-form-field>
<!--Error Message-->
<span *ngIf="loginValues.confirmPassword !== loginValues.password">{{ 'login.password_not_match' | translate }}</span>
<div class="child-padding-top no-side-padding" fxLayoutAlign="end center" >
<button class="button-login-register" [disabled]="loginValues.password !== loginValues.confirmPassword" mat-button color="primary"
(click)="clientNewPassword()" >{{ 'login.SUBMIT' | translate }}</button>
</div>
</form>

You should not use a span for *ngIf, unless you are using the span for a purpose (add a class to it, etc.). But it seems you are just using that to hold your *ngIf statement, since *ngIf has to be tagged to an element. If you're going to do this, you should instead use
<ng-container *ngIf=""></ng-container>.
To answer your question, the only thing that I think you can do without applying validation, is to add more logic. For example you could do:
<ng-container* ngIf="loginValues.confirmPassword !== loginValues.password
&& loginValues.confirmPassword.length > 0
&& loginValues.password.length > 0 ">
{{ 'login.password_not_match' | translate }}
</ng-container>
Basically what you're doing is changing it so that the error is not always shown when the passwords don't match, but instead the user has to have filled out both inputs first. There's other things you could do. For example you could use ngTouched/ngDirty, etc. You can set up the rules as you like them.