Disable the button when fields are empty in Angular5 [ invalid form ]

Question

I am learning Angular5, new to this.

I have two input fields, one button. Handled validations for that two fields, will enable the button once two fields are entered. I have disable the button when the form is invalid. But it is not working.

<form class="customerRegisteration-form">  
  <div class="form-row">
  <div class="form-group col-md-6">
    <label for="firstName">First Name</label>
      <input required ngModel name="firstName" id="firstName" class="form-control"  placeholder="First Name" #firstName="ngModel"/>
      <div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">First Name is required</div>
  </div>
  <div class="form-group col-md-6">
    <label for="lastName">Last Name</label>
    <input required ngModel name="lastName" id="lastName" class="form-control" placeholder="Last Name" #lastName="ngModel"/>
    <div class="alert alert-danger" *ngIf="lastName.touched && !lastName.valid">Last Name is required</div>    
  </div>
  </div>
  <div class="form-group col-md-4">
      <button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
</form>

Kindly help me if anything wrong.

Thanks in Advance.

Just change the form tag to <form class="customerRegisteration-form" #customerRegisteration="ngForm"> — user184994
– user184994, Commented May 20, 2018 at 7:38

Sajeetharan · Accepted Answer · 2018-05-20 07:38:13Z

6

Your Form should have a formGroup as

<form  [formGroup]="customerRegisteration">

or

 <form class="customerRegisteration-form" #customerRegisteration="ngForm">

and then,

<button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">

answered May 20, 2018 at 7:38

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

David Sagang Over a year ago

if you type in a blank space this will be valid. How do you prevent blanks and empty space?

Arash · Accepted Answer · 2018-05-20 07:43:17Z

You can simply add #customerRegisteration="ngForm" in your tag like below

<form class="customerRegisteration-form" #customerRegisteration="ngForm">

Full code is

<form class="customerRegisteration-form" #customerRegisteration="ngForm">  
  <div class="form-row">
  <div class="form-group col-md-6">
    <label for="firstName">First Name</label>
      <input required ngModel name="firstName" id="firstName" class="form-control"  placeholder="First Name" #firstName="ngModel"/>
      <div class="alert alert-danger" *ngIf="firstName.touched && !firstName.valid">First Name is required</div>
  </div>
  <div class="form-group col-md-6">
    <label for="lastName">Last Name</label>
    <input required ngModel name="lastName" id="lastName" class="form-control" placeholder="Last Name" #lastName="ngModel"/>
    <div class="alert alert-danger" *ngIf="lastName.touched && !lastName.valid">Last Name is required</div>    
  </div>
  </div>
  <div class="form-group col-md-4">
      <button type="submit" class="btn btn-lg btn-block btn-info" [disabled]="!customerRegisteration.valid">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
</form>

Note. I suggest you to read Angular Forms Article as well as you have many questions about angular forms

Collectives™ on Stack Overflow

Disable the button when fields are empty in Angular5 [ invalid form ]

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related