Angular form validation disable submit button [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed last year.

Improve this question

In my form I check the name and email validation with name

<input matInputrequired 
       minlength="3" 
       placeholder="Name" 
       ngModel   
       name="name" 
       #firstName="ngModel"
       [(ngModel)]="apiResult.name" 
       id="firstName">

And email with

<input matInput 
       placeholder="Email" 
       ngModel name="email" 
       maxlength="100" 
       #email="ngModel" 
       email 
       [(ngModel)]="apiResult.email" 
       id="email">

if the name field is empty and less than 3 characters. email is not required but if user added an email it should in email format. then if these are success only enable the submit button.

Paul Rooney · Accepted Answer · 2019-05-21 01:56:20Z

13

What is your question?

If you want to see an example of building a simple form with validation check out the movie-edit.component.html file in this repo: https://github.com/DeborahK/MovieHunter

It contains code to disable the submit/save button like this:

<button class="btn btn-primary" type="submit" [disabled]='!editForm.valid'>
    Save
</button>

edited May 21, 2019 at 1:56

Paul Rooney

21.7k9 gold badges47 silver badges64 bronze badges

answered Jan 25, 2018 at 7:31

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nour · Accepted Answer · 2018-01-25 07:30:33Z

11

Okay we can use template driven form:

<form #myForm="ngForm">
   Your email and username inputs

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

answered Jan 25, 2018 at 7:30

Nour

5,9293 gold badges23 silver badges24 bronze badges

4 Comments

user2552863 Over a year ago

but the matter is when it is empty the email field also get validation error I want to check only email is not empty then it should validate. because email is not required.

user2552863 Over a year ago

(name.valid AND (if(email is not emty) then(email is valid))) something like this

Nour Over a year ago

Email input field should not show empty validation error unless you add required validation, also the form is valid only if all it's control is valid. So, if you want the email to be checked only if you required it.

user2552863 Over a year ago

I want to check the email in email format if user entered an email so I used html email field for input. then form.valid get an error with email empty

giovannipds · Accepted Answer · 2020-12-18 07:00:23Z

3

Use [disabled]="myForm.invalid":

<button [disabled]="myForm.invalid" type="submit">Submit</button>

edited Dec 18, 2020 at 7:00

giovannipds

3,5393 gold badges33 silver badges39 bronze badges

answered Oct 1, 2019 at 7:29

Daniel Mark

511 bronze badge

Comments

Chema · Accepted Answer · 2018-12-20 22:32:52Z

-1

I think you are looking for this:

<button [disabled]="!myForm.form.valid" class="btn btn-primary" type="submit">Submit</button>

answered Dec 20, 2018 at 22:32

Chema

9468 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular form validation disable submit button [closed]

4 Answers 4

Comments

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Related