How to show mat-error once the textbox is dirty and is on focus?

mat-error not showing
mat-error without formcontrol
mat-error custom validator
show mat-error on button click
mat-form-field example
errorstatematcher
mat-form-field must contain a matformfieldcontrol
mat-input-container

I want to show the mat-error just after the user has started writing something on an input element. Following is my code:

<mat-form-field appearance="outline">
    <mat-label>Password</mat-label>
    <input matInput type="password" placeholder="Password" required [(ngModel)]='model.password' #password='ngModel' name='Password' [minlength]='requiredLength' [pattern]="passwordPattern">
    <mat-error *ngIf="password.errors?.pattern">
        Password must be 8 characters long, one numeric, one special character....
    </mat-error>
</mat-form-field>

I want to show the error-message once the user has started typing in the input. Currently the error shows up on text-box lost-focus. I have also tried in following way:

<mat-error *ngIf="password.dirty">
    <mat-error *ngIf="password.errors?.pattern">
        Password must be 8 characters long, one numeric, one special character....
    </mat-error>
</mat-error>

But this also produces the same behavior as before. One possible way around would probably using mat-hint. But I don't want to show it as hint as per requirement, I need to show this as error.

By the way, I am using ng-form.

Is it possible to get the specified behavior by using mat-error on ng-form? or I need to customize the css for mat-hint to look it as like the error message?

you can do it in this way -

<mat-form-field appearance="outline">
  <mat-label>Password</mat-label>
  <input matInput 
        type="password"
        placeholder="Password"
        name='Password'
        [ngModel]='model.password'
        (ngModelChange)="onChange($event, password)"
        #password='ngModel'
        [minlength]='requiredLength'
        [pattern]="passwordPattern"
        required>
  <mat-error *ngIf="password.errors?.pattern"">
      Password must be 8 characters long, one numeric, one special character....
  </mat-error>
</mat-form-field>

and in your component.ts add onChange() method -

onChange($event, password){
    this.model.password = $event;
    if(!password.control.touched){
      password.control.markAsTouched();
    }
}

Input, matInput is a directive that allows native <input> and <textarea> elements to behavior (e.g. to show the error as soon as the invalid control is dirty or when a  @ewaschen I'm answering your question from #4027 (comment) over here to keep the discussion related to the issue topics. If it works, the way you've outlined (by checking dirty and the two different possible validation errors) is totally fine.

If you want to trigger validation on every keystroke done by the user, you have to use a little workaround. I suggest you use a FormControl, which will then allow you to set a validator directly on that control and also listen to the changes emitted by valueChanges to mark the FormControl as touched to trigger validation (maybe there is a better solution to this?).

See the following stackblitz. Validation is done via the Validators.pattern (minimum of 8 characters, at least one letter, one number and one special character), so there is no need for a required or minimum length validator anymore.

How to avoid mat-form-field Validation trigger when matInput lose , hasError('required') "> Group Name is required </mat-error> </div> <div </div> </form> The problem is, when cursor out focus the input, the formGroup validation gets show error only when dirty and invalid } } And place your mat-error and input tag google-developers-console · upc · google-sheets-importxml · textbox Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

This will apply the new matcher to your entire app:

dirty-error-state.matcher.ts

import {FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

export class DirtyErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        return !!(control && control.invalid && (control.dirty));
    }
}

app.module.ts

import { DirtyErrorStateMatcher } from 'your-path-here';
import { ErrorStateMatcher } from '@angular/material/core';

@NgModule({
...
  providers: [{
    provide: ErrorStateMatcher,
    useClass: DirtyErrorStateMatcher
  }]
})

Angular 5 validation error not shown on input change, Display custom validator error with mat-error because when I focus out from this input, and while it's empty, it throw an error saying that it can't run on null from '#angular/material/core'; /** Error when invalid control is dirty, touched, or submitted. textbox · wrapper · gdi+ · cinema-4d · tinyos · convertapi · prismjs · mayavi 5 Hiding the text of a TextBox control without using a PasswordBox Feb 20 '17 3 Trying to pull files from my Github repository: “refusing to merge unrelated histories” Oct 30 '18 2 Why can't I set innerHTML on selector?

forms: validation. don't show errors until the user has had a chance , When a user opens a page that has a bunch of required fields, However, it goes red as soon as focus comes into the input. There is a way to specify when to show an error: By using the md-is-error attribute. Apply .mat-input-invalid on empty required fields at pristine angular/components#4030. To force the focus on the input field i wrote a directive and set the focus in every AfterViewChecked cycle as long as the input field has the class ng-untouched. ngAfterViewChecked() { // This dirty hack is needed to force focus on an input element of a modal.

MatError & Cross-Field Validators In Angular Material 7, Assuming you're using Angular Material to create a form like the one above, you might get into the following situation: Why don't I see the error?! forms: validation. don't show errors until the user has had a chance to do something #1633. However, it goes red as soon as focus comes into the input.

Angular 2 Form Validation: How to fire form , The solution is to fire validation error when use focus-out from the current field. So, let's see how we can fire validation errors on-blur in Angular 2. I am displaying the error only when the field is dirty, it is invalid and most  TextBox.Requery method (Access) 02/20/2019; 2 minutes to read; In this article. The Requery method updates the data underlying a specified control that's on the active form by requerying the source of data for the control.

Comments
  • Can you post the code of the component?
  • @FabianKüng I have used ng-form and in my component file I have just initialized the model and other variables.
  • yes, this does serve the purpose. But I don't understand why I should send the event parameter and bind it from the component.ts file? as it is already bound using ngModel. is there any reason for doing that?
  • Thank you for the suggestion. upvoted it as this is definitely a way around. But actually, this is a small portion of a larger form where I needed to show the expected behavior with a minimal change throughout the whole page. The form is already developed on ng-form, converting it into FormControl would lead to change in every input throughout the page. I was looking for a solution without using FormControl,if there is any!