cannot submit a form in angular 4

Question

This is my login.component.html

    <form #user class="form-horizontal" method="post" (ngSubmit)="login($event)">
    <label for="email" class="cols-sm-2 control-label">Your Email</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
        <input type="text" class="form-control" name="email" [(ngModel)]="user.email"  placeholder="Enter your Email"/>
    </div>
    <label for="password" class="cols-sm-2 control-label">Password</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
        <input type="password" class="form-control" name="password"  [(ngModel)]="user.password" placeholder="Enter your Password"/>
    </div>
    <div class="form-group ">
        <button type="submit" class="btn btn-primary btn-lg btn-block login-button">Login</button>
    </div>
</form>

This is my login.component.ts export class LoginComponent{

user = {email:'', password:''};
constructor (private dataservice: DataService){

}//End of constructor

//Login Function
login(){
    console.log(this.user);
    this.dataservice.loginValidate(this.user).subscribe(data => {
        console.log(data);
    },error => {
        console.log(error);
    }
);
}//end of function

}

This is my data.service.ts

    @Injectable()
export class DataService {

    constructor(private http: HttpClient){}

    //Method to login validate
    loginValidate(user) {
            const post_data =  this.http.post('http://localhost/charan/postdata.php',{
            username: user.email,
            password: user.password
        }).subscribe(
            res => {
            console.log(res);
            }
        );
    }

}

When I am trying to post the form data, it is showing below error:

ERROR TypeError: Cannot read property 'subscribe' of undefined at LoginComponent.push../src/app/login/login.component.ts.LoginComponent.login (login.component.ts:35) at Object.eval [as handleEvent] (LoginComponent.html:9) at handleEvent (core.js:9953) at callWithDebugContext (core.js:11046) at Object.debugHandleEvent [as handleEvent] (core.js:10749) at dispatchEvent (core.js:7415) at core.js:8892 at SafeSubscriber.schedulerFn [as _next] (core.js:3415) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133)

This is my package.json

"name": "exproj1", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^6.0.3", "@angular/common": "^6.0.3", "@angular/compiler": "^6.0.3", "@angular/core": "^6.0.3", "@angular/forms": "^6.0.3", "@angular/http": "^6.0.3", "@angular/platform-browser": "^6.0.3", "@angular/platform-browser-dynamic": "^6.0.3", "@angular/router": "^6.0.3", "core-js": "^2.5.4", "rxjs": "^6.2.1", "zone.js": "^0.8.26" }, "devDependencies": { "@angular/compiler-cli": "^6.0.3", "@angular-devkit/build-angular": "~0.6.6", "typescript": "~2.7.2", "@angular/cli": "~6.0.7", "@angular/language-service": "^6.0.3", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.3.0", "ts-node": "~5.0.1", "tslint": "~5.9.1" } }

Please help me to fix this issue.

Thanks in advance

can you add the 'user' object which used to bind the form values? — Raed Khalaf
you used this in the form[(ngModel)]="user.email", this means that there is a 'user' object in the login.component.ts, can you add its implementation to the question body? — Raed Khalaf
@RaedKhalaf, Thank you for your reply. I just defined user as "user;" above the constructor method in login.component.ts. — sree

Deepak paramesh Deepak paramesh · Accepted Answer · 2018-06-13T11:32:26

the value of name and [(ngModel)] should be same.
you have to create an user object in the login.component.ts file.

I can show a code example.

login.component.html

<form class="pt-3" (submit)="onLogin()">
          <div class="form-group">
            <label>Email</label>
            <input type="text" class="form-control" [(ngModel)]="email" name="email" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
              <label>Password</label>
              <input type="password" [(ngModel)]="password" name="password" class="form-control" placeholder="should have min. 6 character with a number">
          </div>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Keep Me logged in for 7 days</label>
          </div>
          <button type="submit" class="btn btn-primary mt-3">Login</button>
        </form>

login.component.ts

export class LoginComponent implements OnInit {
   email: String;
   password : String;
    onLogin(){
        const user = {
          email: this.email,
          password: this.password
        }

        this.authService.authenticateUser(user).subscribe(data => {
          if(data.success){
            this.authService.storeUserData(data.token, data.user);
            this.flashMessage.show('succefully loggedin !', {cssClass: 'alert-success', timeout: 5000});
            this.router.navigate(['/user/dashboard']);
          } else {
            this.flashMessage.show(data.msg, {cssClass: 'alert-danger', timeout:2000});
            this.router.navigate(['/auth/login']);
          }
        });
      }
}

auth.service.ts

authenticateUser(user){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post(this.url + `/users/authenticate`, user, {headers: headers})
      .map(res => res.json())
  }

hope this helps you.

cannot submit a form in angular 4

2 Answers