Angular2 Reactive Form Post HTTP

Viewed 5932

i am new on using angular2. i just dont know how to send http form. i use the reactive form format.

this is my html

<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)"> 
  <div class="form-group">
    <input formControlName="categoryname" type="text" class="form-control" placeholder="Category" >
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
<p>Form: {{ form.value | json }}</p>
<p>Form status: {{ form.status }}</p>
<p> {{error}}</p>

and this is my component

import { Component } from '@angular/core';
import {Category} from './category';
import {CategoryService} from '../service/category.service';
import {FormBuilder, FormGroup, FormControl} from '@angular/forms';
import {Subscription} from 'rxjs';
import { ActivatedRoute, Params} from '@angular/router';

@Component({
    selector: 'registration',
    templateUrl:'./registration.html',
    styleUrls:['./registration.css'],
    providers: [CategoryService]
})

export class AppRegistration {

    categoryname: any;
    response: string;

    form: FormGroup;
    constructor(private categoryserv: CategoryService, public fb: FormBuilder) {
        this.form = this.fb.group({
            categoryname: '',
        });
    }

    onSubmit() {
        console.log(this.form.value, this.form.valid);
    }
}

and this is my service

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Headers, RequestOptions} from '@angular/http';
import {Observable} from 'rxjs/Rx';


import {Category} from '../app-registration/category';



@Injectable()
export class CategoryService {
    private urlcategory = "http://localhost:8080/create-category";
    constructor(private http: Http){ }

}

This my category model

export class Category {
   categoryname: string;
   constructor() { 
   }
} 

my service code is not complete yet . yes because that is my question. how to make service code and get the value of the form and send to the API link based on my model Category code.

I have been confused for three days and i still dont get any answer yet. please help me guys :(

1 Answers
Related