Using AngularJS and JavaScript, set the Submit button to be enabled only when the email input is valid and a value is selected in

I'm trying to create a form that includes an email input field and a drop-down list sourced from a database array. Initially, the submit button is disabled when the form loads.

My goal is to figure out how to activate the submit button only when the input field contains a valid email address and a selection is made from the drop-down list.

Here's my simple 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 anyone has sample code that achieves similar functionality to what I am looking for and is willing to share, it would be greatly appreciated.

Thank you, Erasmo

Answer №1

To make the input field required, simply add 'required' to the input tag. Additionally, you can use the [disabled] attribute in the submit button along with conditions for validation.

<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>

Answer №2

One way to implement Angular Reactive Forms is by following this example

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

In the app.component.ts file, you need to do the following:

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


Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The concept of functions in JavaScript: fact or fiction?

Is there a way to show the message "Yes" or "No" based on the return value of a function without directly using the words true and false, and without utilizing alert? Any suggestions would be greatly appreciated. Thank you. function myFunction { if (Ma ...

Restrict the amount of displayed information in Vue

I'm having trouble creating a Vue button that limits the display of items fetched from an API. The goal is to only show 3 out of 10 questions initially, and when the "showmore" button is clicked, another set of 3 should be displayed, and so on. Howeve ...

I developed a straightforward MVC application that sends an HttpGet request and delivers an array containing 7 randomly generated, unidentified numbers to the View. [RESOLVED

A new MVC app was launched with a simple task of generating 7 random numbers between 0 and 9 to be placed at positions 1 through 7 (without starting with 0). Initially, the numbers are hidden with "X" marks. When the user clicks on the "Submit" button and ...

Error: Could not locate local grunt on Windows 7 Professional

When attempting to initiate grunt, an error message is displayed: c:\repositories\kunde_1\themes-projekt_1\projekt_1-responsive\source>grunt grunt-cli: The grunt command line interface. (v0.1.13) Fatal error: Unable to find lo ...

Eliminating an element from an array depending on the value of its properties

I need to remove an object from my List array by matching its properties value with the event target ID. Currently, I am using findIndex method to locate the index ID that matches the event.target.id. Below is an example of one of the objects in my list a ...

Using checkboxes to select all in AngularJS

Recently, I started working with Angularjs and came across some legacy code. I am trying to figure out a way to select all checkboxes once the parent checkbox is selected. Here is the parent checkbox: <div class="form-group"> <label for="test ...

iOS device experiencing issues with Ionic 1 HTTPS service functionality

I recently entered the hybrid mobile development field, currently working with ionic1 and angularjs1. I am facing an issue where my service calls using the angularjs $http service in the controller work perfectly on android devices, but not on iOS devices. ...

obtain the present date using JavaScript

I am currently utilizing the Datetimepicker developed by XDAN. My goal is to have the current date set as the default when the page loads. To achieve this, I attempted using the new Date() along with the getUTCFullYear functions. However, there's a ...

Utilizing Firebase Cloud Messaging for push notifications in Twilio Conversations

I am currently facing a challenge in setting up push notifications using Twilio Conversations and Firebase Cloud Messaging on a Next.js 12 app. The documentation assumes the use of Firebase 8 syntax, but I am working with Firebase 9 in this case. I have be ...

Struggling to showcase API data on React interface

I am working on fetching data from a private API and displaying it on a web page. My frontend is built using React JS, while my backend uses Node with Express and Axios. Everything seems to be working fine until the point where I need to display the fetche ...

Is incrementing x by 1 equivalent to x + 1?

I have a very basic angular application. It simply increases the value by 1 when clicked on using ng-click. Take a look at JSFiddle <div ng-app="app" ng-controller="ctrl"> <div ng-click="hello=hello+1">THIS WORKS ON CLICK: {{hello}}</d ...

"Failure in bundling with NodeJS using nexe and fusebox

I am attempting to convert a nodejs application into an .exe file. I initially tried using pkg, but encountered errors with half of the node-modules. Now, I am experimenting with a different method. However, when I run the following command: nexe index.js ...

I am facing an issue with TypeScript as it is preventing me from passing the prop in React and Zustand

interface ArticuloCompra { id: string; cantidad: number; titulo: string; precio: number; descuento: number; descripcion: string; imagen: string; } const enviarComprasUsuarios = ({ grupos, }: { grupos: { [key: string]: ArticuloCompra & ...

Tips for handling Ajax urlencode in PHP

I'm facing an issue with a problem and need some assistance to resolve it. Currently, I am attempting to utilize Ajax urlencode in PHP, but the POST content is not being displayed by PHP as expected when HTML is sent directly to PHP. The following c ...

A guide on changing JSON into a JavaScript array

I have a JSON data string that needs to be converted into a JavaScript array. Here is the JSON data: [["Claim","1"],["issue","4"]] My desired output: var data = new google.visualization.DataTable(jsonData); data.addColumn('string' , & ...

Unable to activate function in controller from AngularJS directive

I'm having trouble getting a function in my controller to run after the inplace edit in order to update my data. I can't figure out why it's not triggering... How can I verify that I'm in the correct scope? My framework is Meanjs As a ...

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Is it possible to trigger click events for both of these elements? position: relative container ELEMENT 1: standard div ELEMENT 2: position: absolute div In real life, element 2 is a transparent backdrop designed to capture clicks on top of the header ...

The click-handler method in VueJS Paginate Component fails to activate

I'm currently working on a Vue Component code that involves pagination for a list. The pagination seems to be working fine, except for the issue I encounter when trying to navigate to the next page, which in this case is page 2. I've added a cons ...

Utilize jQuery to select the parent checkbox and mark it as checked

Currently, I am working on a JavaScript function that will automatically check the parent checkbox if a child checkbox is checked. I am implementing this using jQuery and here is my HTML code: <ul id="ulParent" style="margin: 0; padding: 0; list- ...

Utilizing AngularJS uib-collapse to Toggle Visibility of Table Columns

Currently, in Bootstrap the uib-collapse class animation only works for vertical divs. However, I am looking to implement the same animation/motion behavior for table columns when showing or hiding them upon clicking on an icon. Right now, I am using ng-s ...