event.stopPropagation() 无法处理表单
event.stopPropagation() not working on forms
我有一个简单的angular表格,例如:
<form [formGroup]="form">
<div>
<input type="text" (keydown.enter)="onEnterPerssed($event)" [formControl]="myList" formControlName="myList">
</div>
<br>
<p *ngIf="sendData" class="mt-1">Data send successfully</p>
<button type="submit" (click)="onSubmit(form)" class="btn btn-block btn-primary mt-2" style="width: 100px;" [disabled]="form.invalid">
Submit
</button>
</form>
export class AppComponent implements OnInit {
sendData: boolean = false;
form: FormGroup;
isDisabled: boolean = true;
myList: FormControl = new FormControl('sdfsdf', [Validators.required ]);
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.form = this.fb.group({
myList: this.myList
});
}
onSubmit(form): void {
this.sendData = true;
console.log('data send successfully');
}
onEnterPerssed(event: Event) {
event.stopPropagation();
console.log('asdasfasfsfafasfasf');
}
}
有什么解决方案可以防止在不更改按钮类型(提交 => 按钮)的情况下单击输入字段上的 Enter 时提交表单
更改 form
标记上的提交事件,并从提交按钮中删除点击事件。
<form [formGroup]="form" (ngSubmit)="onSubmit($event)">
onSubmit(event) {
event.preventDefault();
// logic goes here
}
ngSubmit
确保表单不会在处理程序代码抛出(这是提交的默认行为)并导致实际的 http post 请求时提交。
在模板中试试这个:
在 form
标签内使用 (keydown.enter)="$event.preventDefault()
<form [formGroup]="form" (keydown.enter)="$event.preventDefault()">
<div>
<input type="text" (keydown.enter)="onEnterPerssed($event)" [formControl]="myList" formControlName="myList">
</div>
<br>
<p *ngIf="sendData" class="mt-1">Data send successfully</p>
<button type="submit" (click)="onSubmit(form)" class="btn btn-block btn-primary mt-2" style="width: 100px;" [disabled]="form.invalid">
Submit
</button>
</form>
我有一个简单的angular表格,例如:
<form [formGroup]="form">
<div>
<input type="text" (keydown.enter)="onEnterPerssed($event)" [formControl]="myList" formControlName="myList">
</div>
<br>
<p *ngIf="sendData" class="mt-1">Data send successfully</p>
<button type="submit" (click)="onSubmit(form)" class="btn btn-block btn-primary mt-2" style="width: 100px;" [disabled]="form.invalid">
Submit
</button>
</form>
export class AppComponent implements OnInit {
sendData: boolean = false;
form: FormGroup;
isDisabled: boolean = true;
myList: FormControl = new FormControl('sdfsdf', [Validators.required ]);
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.form = this.fb.group({
myList: this.myList
});
}
onSubmit(form): void {
this.sendData = true;
console.log('data send successfully');
}
onEnterPerssed(event: Event) {
event.stopPropagation();
console.log('asdasfasfsfafasfasf');
}
}
有什么解决方案可以防止在不更改按钮类型(提交 => 按钮)的情况下单击输入字段上的 Enter 时提交表单
更改 form
标记上的提交事件,并从提交按钮中删除点击事件。
<form [formGroup]="form" (ngSubmit)="onSubmit($event)">
onSubmit(event) {
event.preventDefault();
// logic goes here
}
ngSubmit
确保表单不会在处理程序代码抛出(这是提交的默认行为)并导致实际的 http post 请求时提交。
在模板中试试这个:
在 form
标签内使用 (keydown.enter)="$event.preventDefault()
<form [formGroup]="form" (keydown.enter)="$event.preventDefault()">
<div>
<input type="text" (keydown.enter)="onEnterPerssed($event)" [formControl]="myList" formControlName="myList">
</div>
<br>
<p *ngIf="sendData" class="mt-1">Data send successfully</p>
<button type="submit" (click)="onSubmit(form)" class="btn btn-block btn-primary mt-2" style="width: 100px;" [disabled]="form.invalid">
Submit
</button>
</form>