Köşeli 2: Tuşa basmadan formun nasıl girileceği nasıl girilir?

Question

Otomatik tamamlama işlevi gören tek alanlı bir formum var. Kullanıcı bir kelime girer ve girer girerse, alanın içeriği alanın altındaki bir listeye eklenmelidir.

Sorun: Kullanıcı girdiğinde, doğal olarak tüm form gönderiliyor.

Tuşa basma işlevini zaten return false yapıyorum. Ancak bu işlev çağrılmadan bile formun sunulmuş gibi görünüyor.

Bunun olmasını nasıl engellerim?

temel formu:

<div id="profileForm"> 
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" *ngIf="!showSuccessMessage"> 

    <div class="row"> 

     <div class="form-group col-xs-12 col-sm-6"> 
     <label for="first_name">My Skills</label> 
     <div class="autocomplete"> 
      <input formControlName="skill_string" [(ngModel)]="skillString" name="skill_string" 
      type="text" class="form-control" id="skill_string" placeholder="Comma separated" (keyup.enter)="skillsHandleEnter(skillString)"> 
      <ul class="autocomplete-list" *ngIf="skillHints.length > 0"> 
      <li class="list-item" *ngFor="let skill of skillHints" (click)="addSkillFromAutocomplete(skill)">{{skill}}</li> 
      </ul> 
     </div> 
     <div id="skill-cloud" class="tag-cloud"> 
      <span class="skill-tag tag label label-success" *ngFor="let skill of selectedSkills" (click)="removeSkill(skill)">{{skill}} x</span> 
     </div> 
     </div> 

    </div> 

    <div class="row"> 

     <hr> 

     <div class="form-group submit-group"> 
     <div class="col-sm-12"> 
      <button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button> 
     </div> 
     </div> 

    </div> 

    </form> 
</div> 

temel bileşen (Ben burada yazabilmek için mantık çok soyulmuş): Normal DOM olayları gibi Açısal 2 davrandıklarını

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder } from '@angular/forms'; 
import { ActivatedRoute, Router } from '@angular/router'; 

import { Subscription } from 'rxjs/Rx'; 
import 'rxjs/add/operator/debounceTime'; 
import * as _ from 'lodash'; 

import { MemberService } from '../shared/index'; 

@Component({ 
    moduleId: module.id, 
    selector: 'signup', 
    templateUrl: 'signup.component.html', 
    styleUrls: ['signup.component.css'] 
}) 
export class SignupComponent implements OnInit { 

    private profileForm:FormGroup; 
    private validation_errors:Array<any>; 
    private selectedSkills:Array<string>; 
    private skillHints:Array<string>; 
    private skillString:string; 

    constructor(private route: ActivatedRoute, 
    private formBuilder: FormBuilder, 
    private memberService: MemberService, 
    private router: Router) { 

     this.selectedSkills = []; 
     this.skillHints = []; 
     this.skillString = ''; 

     // Set up form 
     this.profileForm = this.formBuilder.group({ 
     skill_string: [''] 
     }); 

    } 

    ngOnInit(): any { 
    // Do something 
    } 



    updateSelectedSkills(skillString:string):void { 
    if(skillString)) { 
     let cleanString = skillString.trim().replace(/[ ]{2,}/g, ' '); 
     this.selectedSkills = _.compact(this.selectedSkills.concat(cleanString.split(','))); 
     this.skillString = ''; 
     this.skillHints = []; 
    } 
    } 

    skillsHandleEnter(skillString:string):void { 
    console.log("ENTER"); 
    this.updateSelectedSkills(skillString); 
    return false; 
    } 

    autocompleteSkills(term:string):void { 
    this.memberService.autocompleteSkills(term).subscribe(
     res => { 
     this.skillHints = []; 
     for(let i = 0; i < res.data.length; i++) { 
      this.skillHints.push(res.data[i].name); 
     } 
     } 
    ); 
    } 

    addSkillFromAutocomplete(skillString:string):void { 
    this.selectedSkills.push(skillString); 
    this.memberProfile.skill_string = ''; 
    this.skillHints = []; 
    this.skillString = ''; 
    } 


    onSubmit():void { 
    this.memberService.saveProfile(this.memberProfile, this.selectedSkills).subscribe(
     res => { 
     console.log(res); 
     } 
    ); 
    } 

} 

Answer 1

deneyin

<form (keydown.enter)="$event.target.tagName == 'TEXTAREA'" [formGroup]="profileForm" (ngSubmit)="onSubmit($event)"> 

Ayrıca enter da 01'e izin vereceks.

Answer 2

Olaylar.

<button (keyup.enter)="skillsHandleEnter($event, skillString)"></button> 

JavaScript Event.preventDefault() kullanarak:, olay nesnesini yakalamak şablondan olay geri çağırma parametre olarak $event geçmesi için:

Html

@Component(...) 
class MyComponent { 
    skillsHandleEnter(event, skillString) { 
    event.preventDefault(); 
    // ... your logic 
    } 
} 

Answer 3

Bu yüzden cevap aslında oldukça basitti ... Giriş alanına girdiğimden ve düğmeyi dinlemediğimden beri Event.preventDefault() değildi. Tüm düğmeler varsayılan olarak gönderildiklerinden type="submit"'un button'dan kaldırılması yeterli değildi.

<button type="button" (click)="onSubmit()" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button> 

tek tür-sorununa: çalıştığını asla girmek ile Şimdi formu göndererek gerekli tek değişiklik açıkça type="button" eklenmesi ve bir (click) dinleyici ekleyerek, düğme elemanı oldu. Odaklama, otomatik tamamlama giriş alanındayken formu göndermeyi engellemek için biraz daha zarif olur.

Düzenleme: To

sadece imleç Ankit Singh'in çözümü kullanarak ve bunu biraz değiştirerek elde edilebilir otomatik tamamlama alanında olduğunda formu göndererek girerler önlemek: (

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" (keydown.enter)="$event.target.id != 'skill_string'" *ngIf="!showSuccessMessage"> 

Not: Varsayılan eylemin tetiklenmesini önlemek için koşulun yanlış döndürülmesi gerekir)

Elbette normal gönderim düğmemize tekrar ihtiyacımız var (tıklama olayı eklenmeden veya rm) iki kez sunacaktır:

<button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button> 

Bir .autocomplete sınıfını kullanmak istiyorsanız da event.target.classList kontrol edebilir. Veya denetim mantığını $event geçirdiğiniz bir işleve taşıyın.