AngularJS嵌套表单，提交按钮无法正常工作。

10 浏览
0 Comments

AngularJS嵌套表单，提交按钮无法正常工作。

我有一个外部表单，一旦提交，将会将用户发送到下一步。内部表单正在提交对嵌套在外部表单中的表格的搜索请求。目前我的解决方案无法触发这两个表单中的任何一个。

0

3 答案

0 Comments

AngularJS嵌套表单，提交按钮不起作用的原因是因为嵌套表单是无效的。可以在内部表单的元素上使用ng-click来处理搜索，并在外部表单上使用ng-submit。

为了说明我的意思，我修改了angular文档中关于ngSubmit的示例plunker。请参考这个修改后的plunker。

原因：嵌套表单是无效的。

解决方法：在内部表单的元素上使用ng-click来处理搜索，并在外部表单上使用ng-submit。

0
0 Comments

问题出现的原因：

- 表单嵌套是不被允许的，你是否在你的应用程序中使用了Angular？如果是的话，请提供一个你想要实现的Punker示例。

解决方法：

- 如果你想在Angular中使用嵌套表单，可以尝试以下解决方法：

- 使用Angular的FormBuilder来构建表单，而不是手动创建表单。

- 使用FormControlName指令来绑定表单控件，并确保每个FormControlName指令在表单的不同层次中都有唯一的名称。

- 在表单的父级组件中使用FormGroup指令来包裹所有子表单控件。

- 确保在表单中只有一个提交按钮，并确保该按钮位于表单的正确位置。

- 检查表单中是否存在任何错误，例如表单控件的验证错误或未正确绑定的控件。

- 如果问题仍然存在，请提供一个Punker示例以便更好地理解你的问题，并获得更准确的解决方法。

示例代码：


  

    
  

  




import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  parentForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.parentForm = this.formBuilder.group({
      childForm: this.formBuilder.group({
        name: ['', Validators.required]
      })
    });
  }
  onSubmit() {
    if (this.parentForm.valid) {
      // Perform form submission logic here
    }
  }
}

请提供一个Punker示例以更好地理解你的问题，并获得更准确的解决方法。

0
0 Comments

AngularJS嵌套表单，提交按钮无法正常工作的原因是HTML本身是不支持嵌套表单的，但是AngularJS提供了嵌套表单的能力。为了实现这个功能，需要使用ng-form指令。

外部表单使用ng-submit事件，而内部表单使用ng-click事件，并且按钮的type属性设置为button，如果不改变按钮的type属性，那么点击按钮会调用父表单的ng-submit方法。

解决这个问题的方法是在外部表单中添加form标签，因为ng-submit指令只能在form元素上起作用。

以下是一个演示的代码和链接：Demo Fiddle。

相关问题链接：ng-submit directive work only with form。

这样就解决了AngularJS嵌套表单，提交按钮无法正常工作的问题。

0