event.stopPropagation() 不適用於表單

Question

我有一個簡單的角度形式，例如：

  <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 時，是否有任何解決方案可以防止提交表單，而無需更改按鈕類型（提交 => 按鈕）

Answer 1

更改form標簽上的提交事件，並從提交按鈕中刪除點擊事件。

<form [formGroup]="form" (ngSubmit)="onSubmit($event)">

onSubmit(event) {
    event.preventDefault();
    // logic goes here
}

ngSubmit確保當處理程序代碼拋出（這是提交的默認行為）並導致實際的 http 發布請求時，表單不會提交。

Answer 2

在模板中試試這個：

在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>