Question

我正在尝试在我的Angular 2（beta2）应用程序中包含静态HTML表单，但是当我点击提交按钮时它没有做任何事情。

这是我使用的HTML：

  constructor(props) {
    super(props);
    if (!props.viewer) {
      this.handleLogout();
      console.log('Access expired.');
      return;
    }

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {
      return r1.cursor !== r2.cursor;
    }});

    this.state = {
      dataSource: ds.cloneWithRows(props.viewer.firstLoad.edges),
    };
  }

  componentWillMount() {
    // Set up to query for newly received messages
    const {edges} = this.props.viewer.firstLoad;
    this.props.relay.setVariables({
      last: edges.length,
      before: edges[edges.length - 1].cursor,
    });
  }

  componentDidMount() {
    this._interval = setInterval(() => {
      this.props.relay.setVariables({
        last: this.props.relay.variables.last + 10,
      });
    }, 2000);
  }

  componentWillReceiveProps(nextProps) {
    const {edges} = nextProps.viewer.afterFirst;
    if (edges) {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(edges),
      });
    }
  }

如何启用我的表单以使用Angular2？

Answer 1

使用

<form ngNoForm ...>

您可以阻止Angular处理表单。

Answer 2

如果要使用HTML表单的action属性，则需要禁用捕获NgForm事件的submit指令的行为并阻止其传播。请参阅此行：https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_form.ts#L81。

为此，只需将ngNoForm属性添加到表单中：

<form ngNoForm action="https://www.google.com" target="_blank" method="POST">
  <input name="q" value="test">
  <button type="submit">Search</button>
</form>

在这种情况下，将为您的表单提交打开一个新窗口。

也就是说，Angular2处理SPA（单页应用程序），在大多数用例中，您需要在提交表单时保持在同一页面。对于此类用例，您可以使用提交按钮利用submit事件：

<form [ngFormModel]="companyForm" (submit)="onSubmit()">
    Name: <input [ngFormControl]="companyForm.controls.name"
           [(ngModel)]="company.name"/>

    <button type="submit">Submit</button>
</form>

希望它可以帮到你，亨利

Answer 3

Angular 2为表单 submit 事件添加了一个事件处理程序，并阻止正在发送的表单表单。这是为了正常的AJAX用例，你实际上并不想提交表单（从而重新加载页面），而是在JavaScript上捕获它并发送一个AJAX请求（或以其他方式处理数据））。

您可以通过使用自定义事件处理程序来绕过此操作，该处理程序将首先被调用，并且在它进入Angular的处理程序之前已经发送了表单。

为此，您需要在表单元素上添加onsubmit="this.submit()"，如下所示：

<form action="upload_path" method="POST" onsubmit="this.submit()">

无法在Angular 2应用程序中提交HTML表单

3 个答案: