Angular 表单 - "last" 表单的提交按钮不起作用

Question

我有一个非常简单的Angular表格。它的 提交按钮 在被点击时不执行任何操作。但是当我复制表单时，第一个表单的提交按钮有效。但是 最后一个表单的提交按钮没有 。谁能告诉我如何解决这个问题？

这是我在组件中的功能

  message : String;

  sendMessage() {
      console.log("button clicked !");
  }

我的模板是

<form (ngSubmit)="sendMessage()" >
    <textarea class="form-control" name="MyMessage" [(ngModel)]="message"></textarea>
    <button type="submit" class="btn btn-default" id="register"  >Send Message</button>
</form>
<!-- the second form is needed to get the first ones submit button to work -->
<form (ngSubmit)="sendMessage()" >
    <textarea class="form-control" name="MyMessage" [(ngModel)]="message"></textarea>
    <button type="submit" class="btn btn-default">Send Message</button>
</form>

当我有多个表单时，除了最后一个提交按钮外，所有提交按钮都有效。

感谢您的帮助！

Answer 1

这不会工作，因为您还没有初始化 formGroup。

尝试使用表单来执行相同的操作。

 <form (ngSubmit)="sendMessage(messageForm.value)" [formGroup]="messageForm">
    <input type="text" formControlName="message"
                                    class="form-control"/>
    <button class="btn btn-normal btn-white" type="submit"
                                [disabled]="messageForm.invalid">Continue</button>
 </form>

.ts

import { FormBuilder, Validators, FormGroup } from '@angular/forms';

....
constructor(private _fb: FormBuilder);


....
this.messageForm = this._fb.group({
  message: [null, [Validators.required],
});

Answer 2

好的，我找到了罪魁祸首。我的页面中有一个页脚组件

<footer class="footer">
  <p  class="text-xs-center">My footer</p>
</footer>

它覆盖了提交按钮。因此，当我点击提交按钮时，它实际上并没有被点击。代码没有问题。非常感谢大家的帮助。真的很感激:).

Angular 表单 - "last" 表单的提交按钮不起作用

Angular Forms - Submit button of the "last" form does not work

forms

form-submit

typescript

angular