How to return angular's required name using AbstractControl

user_6051507 0
Viewed 39

in my Form im using formBuilder and i want to return a custom message, what I have to do?

this.Form = this.formBuilder.group({     
  name: ['', [Validators.required]]
});

}

And, under the input returns

The field is required

But i want to return with the name of the input, something like

The field name is required

Please someone, help me.

I'm using Angularv14.

angular-material angular validation
3 Answers

Here is an example of how you can show your own custom error messages, you do not need any specific param in form-control

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Email</mat-label>
    <input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
           placeholder="Ex. pat@example.com">
    <mat-hint>Errors appear instantly!</mat-hint>
    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
      Please enter a valid email address
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
      Email is <strong>required</strong>
    </mat-error>
  </mat-form-field>
</form>
user_95988220

Just put something like this inside your mat-form-field element.

<mat-error *ngIf="!form.controls['name'].valid">The field name is required</mat-error>
user_18610440 
<mat-error *ngIf="Form.get('name')?.hasError('required')">The field name is required</mat-error>

You can use this code and you can look at some examples on this page also. https://angular.io/guide/form-validation

user_17929840
Related