1

I am trying to post the form data to my database using Angular2 but only the null values are inserted to my database.I am new to angular can someone find the error in my code

My template,

 <form (ngSubmit)="onSubmit()" [(ngFormModel)]="form" #f="ngForm">

       <div class="form-row">
         <div class="formHeading">Facebook</div>
        <input type="text" id="fb" ngControl="facebook">
        <div class="errorMessage" *ngIf="f.form.controls.fb.touched &&          !f.form.controls.fb.valid"> Facebook address is required</div>
    </div>


     <div class="form-row">
        <div class="formHeading">Google</div>
        <input type="text" id="gl" ngControl="google"  >
        <div class="errorMessage" *ngIf="f.form.controls.gl.touched && !f.form.controls.gl.valid">Google address is required</div>
    </div>


     <div class="form-row">
        <div class="formHeading">Twitter</div>
        <input type="text" id="twt" ngModel = f.twitter >

    </div>


     <div class="form-row">
        <div class="formHeading">LinkedIn</div>
        <input type="text" id="li" >

    </div>



    <div class="form-row">
        <button type="submit" [disabled]="!f.form.valid">Save</button>
    </div>

</form>

My Component

      import {Component} from '@angular/core';
      import {FormBuilder, Validators, ControlGroup, FORM_DIRECTIVES} from      '@angular/common';
      import {Http, Response, Headers} from '@angular/http';
      import {Observable} from 'rxjs/Observable';
      import {Subject } from 'rxjs/Subject';

     @Component({
       selector: 'social-form',
       directives:[FORM_DIRECTIVES],
       templateUrl: './components/social/social.html',
       providers: [FormBuilder]
      })

     export class Social {
           http: Http;
           form;
           payLoad = null;

           constructor(fb: FormBuilder) {

          this.form = fb.group({
             "fb": ['', Validators.required],
             "gl": ['',Validators.required],


         });
     }
      constructor(http: Http) {

         this.http = http;
     }
    onSubmit() {


        var headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post('http://localhost/a2server/index.php/profile/addsocial', JSON.stringify({?????????????}),{headers:headers})
            .map((res: Response) => res.json())
             .subscribe((res:Person) => this.form = res);


        }
   }
     class Person{
    facebook:string;
    google:string;
    twitter:string;
    linkedin:string;
   }

What should i need to keep in json stringify? Here i want validations,so i put a constructor similarlly i need http, am i need another constructor?If yes where should i put it since i cannot put two constructors in one component.

Tunaki
  • 132,869
  • 46
  • 340
  • 423
MMR
  • 2,869
  • 13
  • 56
  • 110
  • Try `this.form.value`. Because we can't know in what form your server expects the data how should we be able to make suggestions? – Günter Zöchbauer Jun 22 '16 at 04:33
  • Its shows the following error, ngFormModel expects a form. Please pass one in. Example:
    – MMR Jun 22 '16 at 04:38
  • JSON.stringify({this.form.value}) it says error(expected : insted of .) – MMR Jun 22 '16 at 04:39
  • Hi Gunter i posted my errors above – MMR Jun 22 '16 at 04:44
  • @Gunter, it shows eoor in console as Its shows the following error, ngFormModel expects a form. Please pass one in. Example:
    – MMR Jun 22 '16 at 04:46
  • Your question doesn't contain `"myCoolForm"`. I only found `[(ngFormModel)]="form"` while it should be `[ngFormModel]="form"` – Günter Zöchbauer Jun 22 '16 at 04:52
  • XMLHttpRequest cannot load http://localhost/a2server/index.php/profile/addsocial. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. this is new error – MMR Jun 22 '16 at 05:00
  • This when you access a server that is different than where your index.html was loaded from. This is not related to Angular. See http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin – Günter Zöchbauer Jun 22 '16 at 05:01
  • Oh great the error was cleared,but null values are inserted to my db and i think this is because of this ......................EXCEPTION: Error in components/social/social.html:2:30b.logError @ bundle.js:22 bundle.js:22 ORIGINAL EXCEPTION: ngFormModel expects a form. Please pass one in. Example:
    – MMR Jun 22 '16 at 05:07
  • 1
    You asked that and I posted a response already above. It's hard from here to see what you're doing exactly. – Günter Zöchbauer Jun 22 '16 at 05:08

0 Answers0