web-dev-qa-db-ja.com

Angular異なる目的でフォームを送信するための2つのボタン

angular反応型

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

送信するボタンが2つあります。ユーザーがボタンを押したときに一般的な操作、つまりフォームを送信する必要がありますが、押したボタンに応じてユーザーを別のページにリダイレクトする必要があるため、ボタンを区別する必要もあります。これが私の2つのボタンです。

<button name="Previous" type="submit" [disabled]="form.invalid"> Previous</button>
<button name="Next" type="submit" [disabled]="form.invalid">Next</button>

OnSubmitイベントでどのボタンが押されたかを知るにはどうすればよいですか？

angularangular-reactive-formssubmit-button
5
user1238784

答えが見つかりました。少しトリッキー：onSubmitイベントで私はチェックします：

var buttonName = document.activeElement.getAttribute("Name");

ユーザーがクリックしたときに、ボタンの1つがフォーム上のアクティブな要素でなければならないので、これは私のためのトリックを行います

3
user1238784

このソリューションで試すことができます

component.html

  <form [formGroup]="form" (ngSubmit)="onSubmit(buttonType)">
        <button type="submit" (click)="onSubmit('Next')">Next</button>
        <button type="button" (click)="onSubmit('Previous')">Previous</button>
    </form>

component.ts

onSubmit(buttonType): void {
        if(buttonType==="Next") {
            console.log(buttonType)
        }
        if(buttonType==="Previous"){
            console.log(buttonType)
        }

}
6
Krishna Rathore

これを試して。

あなたのcomponent.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  form: FormGroup;
  nextClicked = false;


  constructor(private fb: FormBuilder) {
   this.form = this.fb.group({
     age: [20],
     name: ['asdas']
   });
  }

  public onSubmit(): void {
    if(this.nextClicked) {
     ////
    }else {
      ////
    }

  }

  public onNextClick(): void {
    this.nextClicked = true;
  }

  public onPreviousClick(): void {
    this.nextClicked = false;
  }
}

そしてcomponent.html

<div>
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <input formControlName="age">
    <input formControlName="name">
    <button type="submit" (click)="onNextClick()">Next</button>
    <button type="submit" (click)="onPreviousClick()">Previous</button>
  </form>
</div>

そして、あなたはこれで実例を見つけることができます stackblitz 。

2つの送信ボタンのクリックイベントに2つの個別のイベントハンドラを追加できます。 これらのイベントハンドラーは、onSubmitメソッドの前にトリガーされます。これらの2つのイベントハンドラーを使用して、コンポーネントの状態を更新し、ユーザーがnextまたはpreviousボタンをクリックしたかどうか。

そして、その状態に応じて、onSubmitメソッドで異なるページにユーザーを誘導できます。

4
Anuradha Gunasekara

user1238784、Angularでドキュメントを直接使用しないでください。代わりにElementRefまたはRenderer2を使用してください。これは機能しますが、ベストプラクティスに反するため、Angular Universalをある時点で使用することにした場合、SSRが破損します。

Angularでの直接的なDOM操作は大きなことではありません。フレームワークによって提供されるAPIを使用してDOMを常に操作する必要があります。

しかし、あなたはそれのどれも必要としません、あなたはこのようにパラメータとしてイベントを渡すことができます：

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

コンポーネントでは、イベントを使用してクリックされたボタンを識別できます

4
Nikola Rožić

_(click)="buttonClicked='previous/next'"_イベントをボタンに追加できます（必要に応じて、次/前）。その後、クラス_buttonClicked: string_にメンバー変数を作成し、onSubmit()メソッドで読み取り、適切に機能します。

2
William Moore

ウィザードを使用している場合は、前のステップで有効性をチェックしない方が良いです！しかし、チェックしたい場合は、ngsubmitを使用することはできませんが、独自のアクションを定義することができます：

html：

<button name="Previous" type="submit" (click)="submitForm('pre')"[disabled]="form.invalid"> Previous</button>
<button name="Next" type="submit" (click)="submitForm('next')" [disabled]="form.invalid">Next</button>

コンポーネント内：

submitForm(type) {
        if (!this.form.valid) {
            this.checkFormValidity();
            return;
        }
    if(type === 'pre'){
      //Redirect one page

}else{
  //Redirect another page
}
}

checkFormValidity() {
        for (let item in this.form.controls) {
            this.form.controls[item].markAsTouched();
        }
    }
0
Fateme Fazli