避免将动画应用于表单组件或与表单组件相关的元素。
手动禁用表单提交事件。
在组件的HTML模板中,在表单标签上添加(ngSubmit)="onSubmit($event)"
属性,并在组件的Typescript文件中定义onSubmit()
方法。在onSubmit()
方法中添加以下代码:
event.preventDefault();
这将阻止表单提交并解决问题。
示例代码:
HTML模板
Typescript文件
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
form: FormGroup;
constructor() { }
ngOnInit() {
this.form = new FormGroup({
items: new FormArray([
new FormGroup({
name: new FormControl()
}),
new FormGroup({
name: new FormControl()
})
])
});
}
get items(): FormArray {
return this.form.get('items') as FormArray;
}
deleteItem(index: number) {
this.items.removeAt(index);
}
onSubmit(event: Event) {
event.preventDefault();
// handle form submission
}
}