각도 6 입력 키에 입력 추가

각도 6 입력 키에 입력 추가

이 구성 요소는 다음과 같습니다.text-editor.component그리고 이것은 제 HTML 템플릿입니다.

<div class="container">

<div id="testo" class="offset-1 text-center" >
  <input type="text" class="col-8 text-center">
 </div>
</div>

Enter 키를 누를 때 새로운 입력 텍스트를 추가하고 싶습니다.이것이 제가 성취하고자 하는 것입니다.

<div id="testo" class="offset-1 text-center" >
  <input type="text" class="col-8 text-center">
  <!-- second input -->
  <input type="text" class="col-8 text-center">
 </div>
</div>

사용자가 입력에 텍스트를 입력한 후 Enter 키를 누르면 새로운 입력이 생성됩니다.Angular의 템플릿 기반 양식을 사용하고 있습니다.

반응형 양식 FormArray를 사용하여 이 문제에 접근할 수 있습니다.다음을 첨부할 수 있습니다.(keyup)또는(keyup.enter)의 핸들러.<input />이에 대한 처리기 내keyup이벤트, 우리는 새로운 것을 추진합니다.FormControl아주FormArray이 예에서는 FormBuilder를 사용하여 다음과 같은 키를 가진 FormArray가 포함된 FormGroup을 생성합니다.things다음과 같은 푸시 방법을 사용합니다.FormArray새로운 것을 추가하기 위해FormControl/AbstractControl키업을 위한 핸들러 내에서.

구성 요소:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
    
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  myForm: FormGroup;
    
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
    
    
  onEnter() {
    this.addThing();
  }
    
  get things() {
    return this.myForm.get('things') as FormArray;
  }
    
  private createForm() {
    this.myForm = this.fb.group({
      things: this.fb.array([
        // create an initial item
        this.fb.control('')
      ])
    });
  }
    
  private addThing() {
    this.things.push(this.fb.control(''));
  }
}

템플릿:

<form [formGroup]="myForm">
    <div formArrayName="things">
        <div *ngFor="let thing of things.controls; let i=index">
            <label [for]="'input' + i">Thing {{i}}:</label>
            <input type="text" [formControlName]="i" [name]="'input' + i" [id]="'input' + i" (keyup.enter)="onEnter()"  />
        </div>
    </div>
</form>

매우 기본적인 수준에서 각 양식 배열의 컨트롤 속성을 사용하여 각 양식 배열을 루프할 수 있습니다.FormArray요소 및 값 속성을 사용한 값:

<ul>
  <li *ngFor="let thing of things.controls">{{thing.value}}</li>
</ul>

다음은 기능을 시연하는 StackBlitz입니다.

컨트롤러

배열을 'inputs'로 선언하고 값 1로 초기화합니다.

inputs = [1];

addInput() 함수를 만듭니다.

addInput() {
  this.inputs.push(1);
}

HTML

<div id="testo" class="offset-1 text-center" *ngFor="let more of inputs">
<input type="text" class="col-8 text-center" (keyup.enter)="addInput()">
</div>

템플릿에서 Enter(keyup.enter)를 누를 때마다 addInput() 함수를 호출합니다.함수는 새 값을 배열로 밀어넣고 길이가 1씩 증가하면 새 입력 필드가 만들어집니다.

각도 6, 각도 7, 각도 8 및 각도 9... 애플리케이션에서 키다운 이벤트를 쉽게 사용할 수 있습니다.

사용자가 입력 상자 필드를 키업한 다음 각도 구성 요소의 KeyDownEvent()에 트리거합니다.함수 호출에 (keydown.enter) 속성을 사용할 수 있습니다.다음 논리 코드:

.tg.

<input type="search" (keydown.enter)="onKeyDownEvent($event)" />

.ts

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

})
export class MyComponent {

  
  constructor(private router: Router,
              private route: ActivatedRoute) { }

  onKeyDownEvent(event: any) {
    this.router.navigate(['search-result'], { relativeTo: this.route });
    ...logic

  }
}

.ts 파일에서 routerLink="/search-result"로 html 파일이 아닌 다른 경로로 프로그래밍 방식으로 이동해야 합니다. 현재 경로에서 /search-result 경로로 이동하려면 Router 및 ActivatedRoute 클래스를 주입해야 합니다.

keyup.enter 또는 keydown.enter를 사용하는 사람들이 많이 보이지만 가장 적절한 것은 keypress.enter입니다.

<input type="text" [(ngModel)]="reference_num" class="form-control" placeholder="Type Reference number" name="reference_num" (keypress.enter)="search()">

언급URL : https://stackoverflow.com/questions/52375765/angular-6-add-input-on-enter-key