Angular2中如何向服务器提交表单

在Angular 2中向服务器提交表单的完整指南

html
  用户名:
  
  密码:
  
  提交

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  userData = {
    username: '',
    password: ''
  };
  submitForm() {
    // 在这里添加向服务器提交数据的代码
  }
}

typescript
import { HttpClient } from '@angular/common/http';
// 在组件的构造函数中注入HttpClient
constructor(private http: HttpClient) {}
submitForm() {
  this.http.post('https://example.com/api/login', this.userData)
    .subscribe((response) => {
      console.log('服务器响应:', response);
      // 在这里处理服务器的响应
    });
}

typescript
submitForm() {
  this.http.post('https://example.com/api/login', this.userData)
    .subscribe((response: any) => {
      console.log('服务器响应:', response);
      
      // 处理服务器响应
      if (response.token) {
        console.log('登录成功，令牌:', response.token);
      } else {
        console.error('登录失败，错误消息:', response.error);
      }
    });
}