CODEWITHSUNDEEP
javascriptangulartypescript
Kapil
Kapil

Reputation: 832

Cannot print to console

I am new to angular and trying to implement a reactive form. Below is my html code and TS code

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

Here is my TS file

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('[email protected]')

    });

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


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

}

For some reason I cannot print anything on console which I am trying to do in OnSubmit method. I checked everything and it looked okay , but still nothing comes on console when I press the button. Can anyone please help me what am I doing wrong ?

Upvotes: 0

Views: 128

Answers (1)

Naresh Pingale
Naresh Pingale

Reputation: 246

Attribute type is not a valid type on div element. This this case you will need to have an input or button with type submit for the callback to be triggered.

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label for="email">Mail</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>

Upvotes: 1

Related Questions