CODEWITHSUNDEEP
validationangularangular2-forms
manish kumar
manish kumar

Reputation: 4692

Angular 2 form valid by default

Having issue with form validation .

i want to submit the form only when form is valid.

but with the empty inputs and clicking on submit button is submitting the form although the inputs are empty.

<form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && addEquipment()" validate>

Inputs be like this.

 <input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only.">

I cant post the whole code although.

this

f.form.valid is true from form initialization

wanted to acheive something like this

<div *ngIf="!model.equipmentModel && f.submitted" class="text-danger">
                        Please enter Equipment Model
</div>

So on submit i want to show this message instead of default browser's. but this f.form.valid is goddamn true from default.

Upvotes: 1

Views: 5734

Answers (3)

Igor Janković
Igor Janković

Reputation: 5532

In function which you call on submit you can pass form as parameter and then check. In html you will need to pass form instance:

<form name="equipmentForm" #f="ngForm" (ngSubmit)="addEquipment(f)" validate>

In typescript:

addEquipment(form){
   if(form.invalid){
       return;
   }

   //If it is valid it will continue to here...
}

Upvotes: 0

Marcin
Marcin

Reputation: 1426

You should add required attribute to your input tags to, then as @Cobus Kruger mentioned, form will not be submitted untill it is filled.

However you can also give a try to pristine, dirty options, which allow you to check if the user did any changes to the form so in this case your condition may look like this:

 <form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && f.form.dirty ? addEquipment() : ''" validate>

and the input:

 <input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only." required />

In this case it will check if any changes were applied to the input, and submit the form if both conditions are met.

Upvotes: 2

Cobus Kruger
Cobus Kruger

Reputation: 8605

If you specify the required attribute on the input, then the form will not be submitted unless a value is filled in. But that only covers values that were not supplied and you may want to check for invalid values as well.

The usual way is to disable the submit button unless the form is valid. Like this:

<button type="submit" [disabled]="!f.form.valid">Submit</button>

The Angular documentation about form validation also shows this. Look near the bottom of the "Simple template driven forms" section

Upvotes: 0

Related Questions