解决 Angular2 中出现的数据无法提交问题

在使用 Angular2 开发 Web 应用程序时，可能会遇到数据无法提交的问题。这个问题可能由许多因素引起，例如不正确的表单验证、网络连接故障等等。在本文中，我们将探讨一些常见的数据提交问题，并提供一些解决方法。

数据提交问题及其解决办法

问题1：表单验证错误

如果表单验证未通过，Angular2 会防止表单数据提交。因此，您必须首先确保表单验证正确。这通常涉及重新调整表单控件的验证规则和错误消息。下面是一段示例代码：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input id="username" type="text" formControlName="username" class="form-control" />
    <div *ngIf="myForm.get('username').errors?.required">
      Please enter your username.
    </div>
  </div>
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

在上面的代码中，我们使用 Angular2 提供的表单组件实现了一个表单，并设置了一个名为 myForm 的表单组。表单中有一个 username 输入框，当未输入时，若要验证用户名为必填项。我们还设置了 Submit 按钮，只有当表单验证通过时，该按钮才会生效。

问题2：出现网络连接故障

如果表单验证通过，但数据提交后遇到网络故障，您可以使用 Angular2 的 Http 服务和 toPromise 方法。下面是一段示例代码：

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class MyService {
  constructor(private http: Http) {}
  create(data: any): Promise<any> {
    const url = '/api/create';
    return this.http.post(url, data)
      .toPromise()
      .then(response => response.json())
      .catch(reason => Promise.reject(reason.json()));
  }
}

在上面的代码中，我们创建了一个名为 MyService 的服务，该服务使用了 Angular2 提供的 Http 服务和 toPromise 方法。该服务中还添加了 create 方法，该方法用于向服务器发送一个 HTTP POST 请求，用于创建一个新的数据。如果请求成功，我们会将响应转换为 JSON 格式。如果请求失败，我们会将错误信息作为 Promise 的拒绝原因。

在组件中使用该服务：

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  template: `
    <form (submit)="onSubmit()">
      <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" name="name" [(ngModel)]="name" />
      </div>
      <button type="submit">Submit</button>
    </form>
  `,
  providers: [MyService]
})
export class AppComponent {
  name = '';
  constructor(private myService: MyService) {}
  onSubmit(): void {
    const data = { name: this.name };
    this.myService.create(data)
      .then(response => console.log(response))
      .catch(reason => console.error(reason));
  }
}

在上面的代码中，我们编写了一个小组件，该组件具有一个输入框和一个提交按钮。当用户单击“提交”按钮时，我们将数据传递给服务 MyService 中的 create 方法。如果该方法返回成功，则将响应输出到控制台。如果该方法返回错误，则将错误信息输出到控制台。

问题3：CORS 限制

如果您的应用程序在不同的域或端口中运行，并且服务器未启用跨来源资源共享（CORS），则可能会遇到跨域访问限制。在这种情况下，您需要在服务器上添加 CORS header。下面是一段示例代码：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  next();
});

在上面的代码中，我们使用 Express 框架实现了一个服务器（未显示完整代码）。在每个请求中，都会添加 CORS header，以允许跨域访问。

总结

在本文中，我们介绍了一些常见的数据提交问题，并提供了一些解决方法。如果您在使用 Angular2 开发时遇到了数据提交问题，请尝试使用本文中提供的方法进行解决。希望您通过此次学习，能对 Angular2 中的数据提交问题有更深刻的理解。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65937fceeb4cecbf2d837eea