CODEWITHSUNDEEP
angularangular6angular-forms
Vijay
Vijay

Reputation: 159

Couldn't submit reactive form in angular 6

I am learning Angular, I am stuck at trying to submit a form.

This is my addPost component:

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

@Component({
  selector: 'app-addpost',
  templateUrl: './addpost.component.html',
  styleUrls: ['./addpost.component.css']
})
export class AddpostComponent implements OnInit {
  createPostForm : FormGroup;

  constructor(private formBuilder : FormBuilder) { }

  ngOnInit() {
    this.createPostForm = this.formBuilder.group({
      title: ['' , Validators.required],
      content: ['' , Validators.required]
    });
  }

  createPost(){
    alert()
  }

}

This is my addPost html

<div class="container mt-2">
  <div class="row justify-content-center">
      <div class="col-md-6">
          <h2>Add Post</h2>
          <form [formGroup]="createPostForm" (ngSumbit)="createPost()" action="">
            <div class="form-group">
              <label for="title">Title</label>
              <input type="text" formControlName="title" class="form-control">
            </div>
            <div class="form-group">
              <label for="content">Content</label>
              <textarea class="form-control" formControlName="content" cols="10" rows="5"></textarea>
            </div>
            <div class="form-group">
              <input type="submit" class="btn btn-primary" value="Add Post">
            </div>
        </form>
        </div>
  </div>
</div>

I don't know what I'm missing here, it's just a simple reactive form...

Can anyone explain what I'm missing?

Upvotes: 0

Views: 71

Answers (1)

Sunil
Sunil

Reputation: 11243

There is typo error in your code

change

(ngSumbit)="createPost()"

to 

(ngSubmit)="createPost()"

Upvotes: 1

Related Questions