CODEWITHSUNDEEP
formsangular-cliangular2-formsangular5
Shaugi
Shaugi

Reputation: 529

Angular 2/4 how to POST JSON data made by Form

I'm using FormBuilder for make JSON data, I have made this form using FormBuilder, FormGroup, Validators, FormControl

this is my forms code 

<form [formGroup]="SearchForm" (ngSubmit)="search(SearchForm.value)" name="SearchForms">
    <input type="text" formControlName="checkin" value="12:00" placeholder="12:00" readonly> In 
    <input type="text" formControlName="checkout" value="10:00" placeholder="10:00" readonly> Out
    <input type="text" formControlName="guest"> Guest 
    <input type="text" formControlName="room"> Room
    <select formControlName="position">
        <option value="sky">sky</option>
        <option value="earth">Earth</option>
    </select>
    <input type="hidden" formControlName="date" name="date" value="{{selected_date}}">
    <input type="hidden" formControlName="location"  name="location" value="{{location}}">
    <button class="btn shadow" type="submit"> Search </button>
</form>

and this my component.ts file

export class HomeComponent implements OnInit {
http: any;

  SearchForm : FormGroup;
  post:any;

  location: string ='';
  date:string = '';
  checkin:string='';
  checkout:string='';
  guest:number;
  room:number;
  position:string='';

  constructor(private fb: FormBuilder) 
  { 
    this.SearchForm = fb.group({
      'location' : [null],
      'date' : [null],
      'checkin' : [null],
      'checkout' : [null],
      'guest' : [null],
      'room' : [null],
      'position' : [null],      
    });
  }

  search(post) 
  {
    this.location = post.location;
    this.date     = post.date;
    this.checkin  = post.checkin;
    this.checkout = post.checkout;
    this.guest    = post.guest;
    this.room     = post.room;
    this.position = post.position;  

     this.http.post('http://localhost:4200/searchrequest',JSON.stringify(this.SearchForm))
  }
  ngOnInit() 
  {

    this.SearchForm = new FormGroup(
      {
        location: new FormControl(),
        date: new FormControl(),
        checkin: new FormControl(),
        checkout: new FormControl(),
        guest: new FormControl(),
        room: new FormControl(),
        position:new FormControl()
      });}

I have no idea what I should fo next for post data from SearchForm I have made.

Any help form my project? if someone has a link for example you can share it here.

Thanks before

Upvotes: 0

Views: 4953

Answers (2)

Tzvi Gregory Kaidanov
Tzvi Gregory Kaidanov

Reputation: 3140

I needed to get my this.contactForm.value in order to get the object of values . Than i did the stringify

Upvotes: 0

Daniel Netzer
Daniel Netzer

Reputation: 2232

  search(post) 
  {
    this.location = post.location;
    this.date     = post.date;
    this.checkin  = post.checkin;
    this.checkout = post.checkout;
    this.guest    = post.guest;
    this.room     = post.room;
    this.position = post.position;  

     this.http.post('http://localhost:4200/searchrequest',JSON.stringify(this.SearchForm))
  }

should be 

  search(post) 
  {
     this.http.post('http://localhost:4200/searchrequest',JSON.stringify(post))
  }

you are currently assigning all the form values to the component Instance members when you can just as easily send the entire form value.

and you also initialize the searchForm twice, once with the FormBuilder service and the other time with a new FormGroup instance, which are doing exactly the same thing. you can remove the entire ngOnInit() function since you do it already in the constructor.

angular 5 FormBuilder doc's: https://angular.io/api/forms/FormBuilder

adding @marcidius comment as its a valuable part of the solution.

To fix that error you need to add a private http member to your constructor: constructor(private fb: FormBuilder, private http: Http) Also, in your example you don't even need to be passing the SearchForm to that function since it is a class member already. Reactive Forms` values are updated via their bindings so any update to the form elements updates the model automatically. Just call this.searchForm in the JSON.stringify(...) but don't worry about passing it into the function.

Upvotes: 2

Related Questions