无法以 Angular 4 提交表单

Question

这是我的 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>

这是我的 login.component.ts 导出类 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

}

这是我的 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);
            }
        );
    }

}

当我尝试发布表单数据时，它显示以下错误：

错误类型错误：无法读取未定义的属性“订阅” 在 LoginComponent.push../src/app/login/login.component.ts.LoginComponent.login (login.component.ts:35) 在 Object.eval [as handleEvent] (LoginComponent.html:9) 在句柄事件（core.js:9953） 在 callWithDebugContext (core.js:11046) 在 Object.debugHandleEvent [as handleEvent] (core.js:10749) 在 dispatchEvent (core.js:7415) 在 core.js:8892 在 SafeSubscriber.schedulerFn [as _next] (core.js:3415) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133)

这是我的 package.json

{

"名称": "exproj1", “版本”：“0.0.0”， “脚本”：{ “ng”：“ng”， “开始”：“ng服务”， “构建”：“ng构建”， “测试”：“ng测试”， “lint”：“ng lint”， “e2e”：“ng e2e” }, “私人”：真的， “依赖”：{ "@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-b​​rowser": "^6.0.3", "@angular/platform-b​​rowser-dynamic": "^6.0.3", "@angular/路由器": "^6.0.3", "core-js": "^2.5.4", "rxjs": "^6.2.1", “zone.js”：“^0.8.26” }, “开发依赖”：{ "@angular/compiler-cli": "^6.0.3", "@angular-devkit/build-angular": "~0.6.6", “打字稿”：“~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", “茉莉花核”：“~2.99.1”， “茉莉花规格报告者”：“〜4.2.1”， "业力": "~1.7.1", "karma-chrome-launcher": "~2.2.0", “karma-coverage-istanbul-reporter”：“~2.0.0”， “业力茉莉花”：“〜1.1.1”， “karma-jasmine-html-reporter”：“^0.2.2”， "量角器": "~5.3.0", "ts-node": "~5.0.1", “tslint”：“~5.9.1” } }

请帮我解决这个问题。

提前致谢

Answer 1

1. name 和 [(ngModel)] 的值应该相同。
2. 您必须在 login.component.ts 文件中创建一个用户对象。

我可以展示一个代码示例。

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())
  }

希望这对您有所帮助。

Answer 2

从表单中删除#user ref 或更改其名称。如果你在 ts 中使用这个实例，那就有问题了。