Question

我有一个非常简单的 Angular Form 。单击它的提交按钮不会执行任何操作。但是，当我复制表单时，第一个表单的提交按钮起作用。但是最后一个表单的提交按钮没有。有人可以告诉我如何解决这个问题吗？

这是我在组件中的功能

  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>

它覆盖了提交按钮。因此，当我单击“提交”按钮时，实际上不会被单击。代码没有问题。非常感谢大家的帮助。真的很感激：）。

角度表单-“最后一个”表单的“提交”按钮不起作用

2 个答案: