[解決済み] Angular 5 Enterキー押下でボタン送信
2022-02-19 23:42:15
質問
Angular 5のフォームアプリケーションで、通常のモデルをすべて使用していますが、フォーム上で、「送信」ボタンを物理的にクリックしなくてもフォームを送信できるようにしたいのです。
通常であれば、このような場合は
type=submit
をボタン要素に追加しましたが、全く動作していないようです。
を呼び出したいわけではありません。
onclick
関数が動作するようにするためだけです。どなたか、私が見落としているようなことを教えていただけませんか。
<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
<mat-card>
<mat-card-title class="firstCard">Investor/Adviser search</mat-card-title>
<mat-card-content>
<p *ngIf="this.noCriteria" class="errorMessage">Please enter search criteria.</p>
<p *ngIf="this.notFound" class="errorMessage">No investor's or adviser's found.</p>
<mat-form-field>
<input matInput id="invReference" placeholder="Investor/Adviser reference (e.g. SCC/AJBS)" #ref>
</mat-form-field>
<mat-form-field>
<input matInput id="invId" placeholder="Investor/Adviser ID" type="number" #id>
</mat-form-field>
<mat-form-field>
<input matInput id="invForname" placeholder="Forename" #forename>
</mat-form-field>
<mat-form-field>
<input matInput id="invSurname" placeholder="Surname" #surname>
</mat-form-field>
<mat-form-field>
<input matInput id="invPostcode" placeholder="Postcode" #postcode>
</mat-form-field>
</mat-card-content>
<mat-card-footer>
<button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search.">Search</button>
</mat-card-footer>
</mat-card>
</form>
どのように解決するのですか?
のようにダミーフォームで囲むという手もありますね。
<mat-card-footer>
<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
<button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search." >Search</button>
</form>
</mat-card-footer>
検索機能には
return false
を使用して、アクションが実行されないことを確認します。
ただ、Enterキーを押したときに、フォームにフォーカスが当たっている(はず)ことを確認してください。
関連
-
[解決済み] (X)HTMLにおける "PRE "タグの用途は何ですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] Angular HTMLバインディング
-
[解決済み] jQueryの送信ボタンの無効化・有効化
-
[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする
-
[解決済み] Can I make a <button> not submit a form?
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み】送信ボタンがないのにEnterキーを押してフォームを送信する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
[解決済み】ラジオボタンの代わりに画像を使用する
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか?
-
[解決済み] (X)HTMLにおける "PRE "タグの用途は何ですか?
-
[解決済み] HTMLのテーブルを部分的に透明にするには?
-
[解決済み] フォームの中にフォームがある、でいいのかな?[重複]
-
[解決済み] margin-block-startとmargin-topの違いは何ですか?
-
[解決済み] TD rowspan が機能しない
-
[解決済み] 画像をインラインで表示する方法