CODEWITHSUNDEEP
javascripthtmlangulartypescriptforms
firas1
firas1

Reputation: 169

Angular - show error message on submit when form is invalid

I have this form where an error message shows under every field if I leave it empty or invalid.

<form #projectForm="ngForm" (ngSubmit)="onSubmit()">

     <div class="form-group col-md-6" [class.has-error]="codeControl.invalid && codeControl.touched">
        <label  class="control-label">code</label>
        <input type="text" class="form-control" required [(ngModel)]="projet.code" id="code" name="code" #codeControl="ngModel">
        <span class="help-block" *ngIf="codeControl.invalid && codeControl.touched">code is required </span>
      </div>



      <div class="form-group col-md-6" [class.has-error]="libelleControl.invalid && libelleControl.touched">
        <label class="control-label">libelle</label>
        <input type="text" class="form-control" required [(ngModel)]="projet.libelle" id="libelle" name="libelle" #libelleControl="ngModel">
      <span class="help-block" *ngIf="libelleControl.invalid && libelleControl.touched"> libelle is required </span>
      </div>


    <button type="submit" class="btn btn-primary" >submit </button>

    
  </form>

But when it comes to the submit button , I don't want the submit button to be disabled until the form is valid, instead I want the submit button border to become red and a red error message shows under the submit button when clicked and the form is invalid. How can I achieve that ?

Upvotes: 0

Views: 1763

Answers (3)

adhs91
adhs91

Reputation: 152

We have to override the default behaviour of submit button. So, remove the button type as submit and add click event to it

  <button type="button" (click)="onSubmit()" class="btn btn-primary" >submit </button>

Remove the submit event in form tag

<form #projectForm="ngForm">

Add the conditional class to the button

<button type="submit" (click)="onSubmit()" class="btn btn-primary" [ngClass]="projectForm.valid ? '' : 'invalid-form-btn'" >submit </button>
<span *ngIf="!projectForm.valid">The form is not valid </span>

.invalid-form-btn {
    border: 1px solid red; 
}

Upvotes: 0

jean
jean

Reputation: 31

try this: on your component

success: any;

constructor () 
{
this.success = true;
}

onSubmit(){

if(this.yourform.invalid){
    this.success= false; 
    return;
}

}

on your html

 <div *ngIf="success;then content else other_content"></div>    
  <ng-template #content>
    <button type="submit" class="btn btn-primary" >submit </button>
  </ng-template>

  <ng-template #other_content>
  <button type="submit" class="btn btn-primary" style="border: 2px solid red">submit 
  </button>
   <!-- your error message goes here -->
 </ng-template>

i copied the *ngIf here at How to use *ngIf else?

Upvotes: 1

rood
rood

Reputation: 12773

I would go with simple getter to manage state of the 'submit btn'

get isFormValid():boolean {
  this.ngForm && this.ngForm.valid;
}

then

 <button type="submit" class="btn btn-primary" [class.cssClassToManageBtnState]="isFormValid" >submit </button>

Upvotes: 0

Related Questions