AngularJS + JavaScript: Enable Submit button only after email is valid and dropdown has a value selected

All we need is an easy explanation of the problem, so here it is.

I have a form that has an input email field and a drop-down list populated by an array from database, at the bottom I have a submit button that is disabled when the form first opens.

I would like to learn how to enable this submit button, only if the input field contains a valid email, and the drop-down list has a selected value.

This is my small form:

<form name="form">
    <div class="container pt-5 pb-5">
        <div class="row">
            <div class="col-md-8">
                @* Email Address *@
                <div>
                    <label for="email-address">Email</label>
                    <input type="email" class="form-control" name="emailID" ng-model="email" placeholder="Enter Email Address" />                        
                </div>
                <br />
                @* Meetings  *@
                <div>
                    <label for="meeting-list">Current Available Meetings</label>
                    <select ng-model="selectedMeeting" ng-change="GetValue()">
                        <option ng-repeat="meeting in MeetingList" value="{{meeting.MeetingID}}">Meeting: {{meeting.MeetingName}}</option>
                        <option value="">--Select Meeting--</option>
                    </select>
                </div>

                <div>
                    <input type="submit" value="Submit" id="butClick" ng-click="SendMail();"/>
                </div>


            </div>
        </div>
    </div>
</form> 

If someone has some code that does something similar to what I need, and would not mind sharing it, that would be great.

Thank you kindly,
Erasmo

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You can use the ‘required’ in the input and you can set [disabled] and set conditions in the submit button.

    <form #formName="ngForm" (ngSubmit)="yourFunction(formName)">

    <input type="email" class="form-control" name="emailID" ng-model="email" placeholder="Enter Email Address" required />

    <button type="submit" class="btn btn-primary btn-round" [disabled]="!formName.form.valid || form.pristine">Send mail</button>

    </form>

Method 2

You can also use Angular Reactive Forms like this

<form [formGroup]="form">
      <input placeholder="Enter your email" formControlName="email" required/>
      <button type="submit" [disabled]="form.invalid">SEND</button>
</form>

In app.component.ts file, you have to write

form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]]
    })
  }


Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply