Unable to communicate with the console

Exploring Angular for the first time and attempting to set up a reactive form. Here's a glimpse of my HTML and TypeScript codes:

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" formControlName="email" class="form-control">
  </div>
  <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

And now here is my TypeScript file snippet:

import { Component , OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app works!';
  signupForm : FormGroup;

  ngOnInit(){
    this.signupForm =  new FormGroup({
      'email' : new FormControl('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91e5f4e2e5d1e5f4e2e5bff2fefc">[email protected]</a>')

    });

    // this.signupForm.valueChanges.subscribe(
    //   (value) => console.log(value)
    // );
  }


  onSubmit(){
    console.log(this.signupForm);
  }

}

Despite thorough checks, I am unable to log anything on the console when clicking the button through the OnSubmit method. Can you please guide me on what might be going wrong?

Answer №1

The type of attribute is not valid for the div element. In this scenario, you will need to include an input or button with a type of submit in order for the callback function to be triggered.

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label for="email">Email</label>
             <input type="email"
                 name="email"
                 id="email"
                 formControlName="email"
                 class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

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

I'm experiencing an issue where my drum app element does not refresh after performing an action dispatch

Struggling with my React/Redux drum app, I'm at a roadblock with the final component that should update with the selected object's ID through an action dispatch. It baffles me why the element won't reflect the changes even though I've c ...

Setting the focus to an input field after submitting in a Chrome extension_HTML

Seeking to enhance a Chrome extension, I am aiming to ensure that the focus returns to the input text box after submission. The desired input process is as follows: 1. User types in input 2. User hits enter or taps the button 3. The form submits without r ...

Contact Form 7 - Including Event Registration

I'm interested in adding Event Tracking to the Submit button, but I'm unsure of where to find that in the plugin files for this specific Wordpress plugin known as Contact Form 7. If this were HTML, I would typically replace code like this: < ...

How do you activate the background color for paragraphs <p> when a bootstrap button is styled with CSS?

In the code snippet provided below, dynamic creation of paragraphs with changing background colors and styles is demonstrated. One challenge faced in this script is maintaining the printed background colors for each dynamically generated paragraph. The is ...

"Trouble with kendo drop-down list: onclick event not triggering when text is changed

I am currently working with kendo UI and have implemented a dropdown list of checkboxes. The onchange event is triggering when the user clicks on the checkbox, but it is not firing when the user clicks on the text. Thank you in advance for your assistance ...

Automatically refreshing profile icon on the Navbar (Angular)

I've customized a navigation bar so that when a user logs in, the "Log in" link is replaced by their profile icon. However, there's an issue where after logging in, the navbar reloads but the profile icon doesn't appear until you manually re ...

Exploring the integration of polyfills and the jQuery package in Next.js

Encountering a problem related to the Next.js array-flat polyfill. It is essential for me to have compatibility with older versions of Chrome, specifically in the range from v60 to v68. The project I am currently working on utilizes a video player library ...

`req.body is not defined within a custom middleware function in Express`

I am currently working on a NodeJS application using MongoDB, Express, and Mongoose. In my mongoose schema, I have a field (pictureURL) with a default value. The issue I'm facing is that when pictureURL is an empty string, the default value is not app ...

Passing data between pages in Node.js

My current project involves creating a web service using node.js. In this setup, I am utilizing curl to send POST data to my index.js application. The index.js app processes the received data and I need it to then route the output to various pages based on ...

Hold off on advancing until the particular text is found in the DOM element

One of the challenges I'm facing is creating a function that waits for specific text to change before returning a value: function getElementText() { while(isLoading()) { } return $('#element').text(); } function isLoading() { ...

Tips for Maintaining Toastr Notifications on ASP MVC Even After Redirecting to Another Page

I am currently working on an ASP MVC 5 application and encountering an issue with displaying a Toast notification. The toast notification is supposed to appear after updating a user's information to confirm the success of the operation. However, it ...

I am experiencing an issue with using double quotation marks in VS Code

Whenever I press the double quote symbol like this "", the cursor automatically moves to the end. While this may be natural, I would prefer the cursor to move inside the double quotes automatically when pressing them. Additionally, it's a bi ...

How can I use AngularJS to show a JSON value in an HTML input without any modifications?

$scope.categories = [ { "advertiser_id": "2", "tier_id": 1, "tier_name": "1", "base_cpm_price": "", "retarget_cpm": "", "gender": "", "location": "", "ageblock1": "", "ageblock2": "", "ageblock3": ...

What causes the successful implementation of camelCase attributes in TypeScript to result in an error when used in JavaScript with React?

I'm currently developing my own React component library in TypeScript, which I seamlessly integrate with React JS projects. While everything works smoothly when using the components in TypeScript, I encounter errors in the console when working in JS. ...

Unable to Close Modal with Selectize in Rails 6

During my journey to update an old Go Rails video tutorial for selectize functionality to work with Rails 6, I encountered a challenge. I have established a relationship where each item belongs to a series. class Item < ApplicationRecord belongs_to :s ...

Reorganize the elements in the array while maintaining the original order of identical items

Imagine I am faced with an array like this: var array = [ { name: "border-color", value: "#CCCCCC" }, { name: "color", value: "#FFFFFF" }, { name: "background-color", value: "rgb(0, 0, 0)" }, { name: "background-color", value: "rgba(0, 0, 0, .5)" ...

the order of initialization in angularjs directives with templateUrl

In my current scenario, I am faced with a situation where I need to broadcast an event from one controller and have another directive's controller receive the message. The problem arises because the event is sent immediately upon startup of the contro ...

Binding objects and properties from Angular2/Typescript to a template

Disclaimer: Seeking insight on the correct approach or any additional information _____________________________________________________________________ ANGULAR1 When working with angular1, we had the option to define our objects in the following ma ...

After the re.redirect() has loaded, remember to refresh the page

Currently, I am in the process of creating a website solely for educational purposes, focusing on articles. After a user adds a new article, the intended action is to redirect them back to the homepage seamlessly. Upon testing this functionality and addi ...

Unable to configure AngularJS inputs to have a blank default value

I am facing a peculiar issue where I am unable to initialize my input fields as blank/empty. Even after clearing the cache and performing a hard reload, Google Chrome seems to be auto-populating them with older cached values. Here is the current view: ht ...