如何防止在輸入時提交表單提交

我有一個表單，並且我有一個名爲systemParameters的字段，我想指定按回車時保存在數組中的許多值。如何防止在輸入時提交表單提交

問題是在按下輸入表單的同時被提交。

在這種情況下，哪種方式最好提交表單？

我最初的想法是禁用提交按鈕，直到所有字段已滿，但是當我填寫所有字段時，因爲我向systemParameters字段添加了多個值，它將導致表單在某個時間點提交。

這是我到目前爲止所做的一件事。

https://plnkr.co/edit/dHJf8QEhhvU5LupdDcmX?p=info

import {Component} from "angular2/core"; 
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, AbstractControl, Validators, Control} from "angular2/common"; 

@Component({ 
    selector: 'parameters-form', 
    directives: [FORM_DIRECTIVES], 
    template: ` 
     <h1>Parameters Form</h1> 
     <p>{{ arr }}</p> 
     <form [ngFormModel]="myForm" (ngSubmit)="onSubmit(myForm.value)" class="ui form"> 

     ... 

      <div class="field"> 
      <label for="systemParameters">System Parameters</label> 
      <input type="number" 
        id="systemParameters" 
        placeholder="systemParameters Param" 
        [ngFormControl]="systemParameters" 
        (keypress)="addToArray($event, systemParameters.value)"> 

      <button type="button" (click)="addToArray(systemParameters.value)">Add</button> 

      </div> 

      ... 

     <button type="submit" class="ui button">Submit</button> 
     </form> 
    ` 
}) 
export class ParametersForm { 
    myForm: ControlGroup; 
    systemParameters: AbstractControl; 
    arr: number[]; 

    constructor(fb: FormBuilder) { 
    this.myForm = fb.group({ 
     "realisations" : [""], 
     "numConstSteps" : [""], 
     "timeHorizon": [""], 
     "continuationStep" : [""], 
     "continuationStepSign" : [""], 
     "numberOfModelParameters" : [""], 
     "systemParameters" : [], 
     "param" : [""], 
     "netLogoFile" : [""], 
     "numberOfModelVariables" : [""], 
     "restrictOperator" : [""], 
     "liftOperator" : [""], 
     "xInitial" : [""] 

    }); 
    this.arr = []; 
    this.systemParameters = this.myForm.controls["systemParameters"]; 
    } 
    addToArray(event,value: any): void { 
    if (event.charCode == 13){ 
     this.arr.push(value); 
     this.arr = this.arr.slice(); 
     (<Control>this.systemParameters).updateValue(""); 
    } 
    } 
    onSubmit(form: any): void { 
    console.log(this.arr); 
    form.systemParameters = this.arr; 
    console.log("your submitted value:", form) 
    } 

}

來源

2016-02-14 Petros Kyriakou

我不知道這是一個聰明的解決方案，但它似乎工作

<form #f=ngForm [ngFormModel]="myForm" (keydown.enter)="false" (ngSubmit)="onSubmit(myForm.value)" class="ui form"> 
    ... 
<button type="button" (click)="f.ngSubmit.emit(null)" class="ui button">Submit</button>

參見https://plnkr.co/edit/sekWZHOXlyQOSMoRuAUz?p=preview（從您的模板剝離下來一點）

來源

2016-02-14 19:29:20

啊似乎它不工作，請檢查更新它的搶劫！ –

也不起作用。我的意思是提交不適用於輸入，這是我想要的，但也是我的領域，我想按下輸入工作也無法正常工作。編輯：更新我的掠奪者，以反映最新的變化 –

你的問題說，你不希望表格提交輸入。進入後應該發生什麼？ –

如何防止在輸入時提交表單提交

回答

相關問題