angular2 ส่งแบบฟอร์มโดยกด Enter โดยไม่มีปุ่มส่ง

เป็นไปได้ไหมที่จะส่งแบบฟอร์มที่ไม่มีปุ่มส่ง (โดยการกด Enter) ตัวอย่าง:

<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form

บางทีคุณอาจเพิ่มkeypressหรือkeydownลงในช่องป้อนข้อมูลและกำหนดเหตุการณ์ให้กับฟังก์ชันที่จะทำการส่งเมื่อคลิกเข้า

เทมเพลตของคุณจะมีลักษณะเช่นนี้

<form (keydown)="keyDownFunction($event)">
  <input type="text" />
</form

และคุณทำงานภายในคลาสของคุณจะมีลักษณะเช่นนี้

keyDownFunction(event) {
  if (event.keyCode === 13) {
    alert('you just pressed the enter key');
    // rest of your code
  }
}

คุณยังสามารถเพิ่ม (keyup.enter)="xxxx()"

แก้ไข:

  <form (submit)="submit()" >
    <input />
    <button type="submit" style="display:none">hidden submit</button>
  </form>

ในการใช้วิธีนี้คุณต้องมีปุ่มส่งแม้ว่าจะไม่ปรากฏ "ขอบคุณสำหรับคำตอบของ Toolkit "

คำตอบเก่า:

ใช่ตามที่คุณเขียนไว้ทุกประการยกเว้นชื่อเหตุการณ์(submit)แทนที่จะเป็น(ngSubmit):

<form [ngFormModel]="xxx" (submit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form>

ฉันชอบ(keydown.enter)="mySubmit()"เพราะจะไม่มีการเพิ่มตัวแบ่งบรรทัดหากเคอร์เซอร์อยู่ที่ไหนสักแห่งภายใน a <textarea>แต่ไม่อยู่ที่จุดสิ้นสุด

วิธีนี้ง่ายมาก ...

<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">

</form>

ใช้ keydown.enter แทน keyup.enter เสมอเพื่อหลีกเลี่ยงการล้าหลัง

<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>

และฟังก์ชั่นภายใน component.ts

 textValue : string = '';  
 sendMessage() {
    console.log(this.textValue);
    this.textValue = '';
  }

เพิ่มสิ่งนี้ภายในแท็กอินพุตของคุณ

<input type="text" (keyup.enter)="yourMethod()" />

(keyup.enter)="methodname()"

สิ่งนี้ควรใช้งานได้และได้กล่าวไว้แล้วในคำตอบมากมายอย่างไรก็ตามควรมีอยู่ในแท็กแบบฟอร์มไม่ใช่บนปุ่ม

การเพิ่มปุ่มส่งที่มองไม่เห็นจะเป็นเคล็ดลับ

<input type="submit" style="display: none;">

เพียงแค่เพิ่ม (keyup.enter)="yourFunction()"

หวังว่าสิ่งนี้จะช่วยใครบางคนได้: ด้วยเหตุผลบางอย่างฉันไม่สามารถติดตามได้เนื่องจากไม่มีเวลาหากคุณมีรูปแบบเช่น:

<form (ngSubmit)="doSubmit($event)">
  <button (click)="clearForm()">Clear</button>
  <button type="submit">Submit</button>
</form>

เมื่อคุณกดEnterปุ่มclearFormฟังก์ชันจะถูกเรียกแม้ว่าพฤติกรรมที่คาดหวังคือการเรียกใช้doSubmitฟังก์ชัน การเปลี่ยนClearปุ่มเป็น<a>แท็กช่วยแก้ปัญหาให้ฉันได้ ฉันยังคงต้องการทราบว่าเป็นไปตามที่คาดหวังหรือไม่ ดูเหมือนฉันจะสับสน

หากคุณต้องการรวมทั้งที่เรียบง่ายกว่าที่ฉันเห็นที่นี่คุณสามารถทำได้เพียงแค่ใส่ปุ่มของคุณไว้ในแบบฟอร์ม

ตัวอย่างที่มีฟังก์ชันส่งข้อความ:

                <form>
                    <mat-form-field> <!-- In my case I'm using material design -->
                        <input matInput #message maxlength="256" placeholder="Message">
                    </mat-form-field>
                    <button (click)="addMessage(message.value)">Send message
                    </button>
                </form>

คุณสามารถเลือกระหว่างการคลิกที่ปุ่มหรือกดปุ่ม Enter

หากคุณต้องการรวมทั้งสองอย่าง - ยอมรับเมื่อป้อนและยอมรับเมื่อคลิกแล้วทำ -

 <div class="form-group">
    <input class="form-control"   type="text" 
    name="search" placeholder="Enter Search Text"
              [(ngModel)]="filterdata"  
           (keyup.enter)="searchByText(filterdata)">
  <button type="submit"  
          (click)="searchByText(filterdata)" >

  </div>