각도 4 - 입력 값 가져오기

각도 4 - 입력 값 가져오기

각도 4의 입력값을 얻는 방법을 알고 싶습니다.각도에 대한 설명서를 살펴보았는데 주요 이벤트가 포함된 예제가 저에게 잘 작동하지 않습니다. 이 작업을 수행하는 방법을 제대로 찾을 수 없으니 도와주십시오.

문제:입력 값을 읽고 값을 선택 태그에 추가할 다른 구성 요소에 값을 제출한 후(예: 사용자 이름을 선택 태그 목록으로 보내기)

<form (submit)="onSubmit()">
   <input [(ngModel)]="playerName">
</form>

let playerName: string;
onSubmit() {
  return this.playerName;
}

HTML에서 추가

<input (keyup)="onKey($event)">

및 구성 요소 추가

onKey(event) {const inputValue = event.target.value;}

양방향 데이터 바인딩을 사용하지 않으려는 경우.당신은 이걸 할 수 있다.

HTML에서

<form (ngSubmit)="onSubmit($event)">
   <input name="player" value="Name">
</form>

구성요소 내

onSubmit(event: any) {
   return event.target.player.value;
}

html

<input type="hidden" #fondovalor value="valores">
     <button (click)="getFotoFondo()">Obtener</button>

ts

@ViewChild('fondovalor') fondovalor:ElementRef;

getFotoFondo(){ 
        const valueInput = this.fondovalor.nativeElement.value
}

템플릿 참조 변수를 사용할 수도 있습니다.

<form (submit)="onSubmit(player.value)">
   <input #player placeholder="player name">
</form>

onSubmit(playerName: string) {
  console.log(playerName)
}

당신은 당신의 html 템플릿을 기반으로 Angular template reference variable을 사용할 계획이었던 것 같습니다.

 // in html
 <input #nameInput type="text" class="form-control" placeholder=''/>

 // in add-player.ts file
 import { OnInit, ViewChild, ElementRef } from '@angular/core';

 export class AddPlayerComponent implements OnInit {
   @ViewChild('nameInput') nameInput: ElementRef;

   constructor() { }

   ngOnInit() { }

   addPlayer() {
     // you can access the input value via the following syntax.
     console.log('player name: ', this.nameInput.nativeElement.value);
   }
 }

사용할 수 있습니다.(keyup)또는(change)이벤트, 아래 예 참조:

HTML에서:

<input (keyup)="change($event)">

또는

<input (change)="change($event)">

구성요소:

change(event) {console.log(event.target.value);}

필드 값을 하나만 읽으려면 템플릿 참조 변수를 사용하는 것이 가장 쉬운 방법이라고 생각합니다.

템플릿

<input #phone placeholder="phone number" />

<input type="button" value="Call" (click)="callPhone(phone.value)" />

**Component** 
 
callPhone(phone): void 
{
  
console.log(phone);

}

필드가 여러 개인 경우 반응형을 사용하는 것이 가장 좋은 방법 중 하나입니다.

Angular 11에서 템플릿을 설정하여 다음을 수행할 경우form다음을 포함하는 태그input태그 및 또한 존재합니다.button클릭할 수 있는 다음 코드는 경고하는 방법을 보여줍니다.input양방향 데이터 바인딩을 통한 태그 값:

app.component.html:

<form>
  <input [(ngModel)]="example" name="example">
  <button (click)="alert()">Alert</button>
</form>

app.component.ts:

example: string;

alert() {
  alert(this.example);
}

참고:name여기에는 템플릿의 특성이 필요합니다. 그렇지 않으면 개발자 콘솔에 다음과 같은 오류 메시지가 표시됩니다.

Error: If ngModel is used within a form tag, either the name attribute must be set or the form
  control must be defined as 'standalone' in ngModelOptions.

  Example 1: <input [(ngModel)]="person.firstName" name="first">
  Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

HTML 구성 요소

<입력 유형="text" [formControl]="txtValue">

TS 구성 요소

public txtValue = 새 FormControl('), {검증인:[검증인.필수] });

우리는 이 방법을 사용하여 API를 사용하여 저장할 수 있습니다.LModules는 Angular 파일에 있는 모듈 파일입니다. SaveSampleExams는 서비스 파일이 한 가지 기능 방법입니다.

>  this.service.SaveSampleExams(LModules).subscribe(
>             (data) => {
>               this.dataSaved = true;
>               LearnersModules.txtValue = this.txtValue.value; 
>              });

이것이 제가 좋아하는 방법입니다.내가 이 방법을 선호하는 이유는 양식에 직접 첨부한 함수 이외의 함수에서 입력 값을 참조할 수 있고, 다음과 같은 경우 검증자를 추가하고 값을 미리 설정할 수 있기 때문입니다.

import {
  FormBuilder,
  FormGroup,
  Validators, FormsModule, ReactiveFormsModule
} from '@angular/forms';

@Component({
  selector: 'test-app',
  templateUrl: './test-app.component.html',
  styleUrls: ['./test-app.component.scss']
})
export class SearchUsersComponent implements OnInit {

  testForm!: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
  ) {}

  async ngOnInit(): Promise < void > {

    this.testForm = this.formBuilder.group({
      input1: "",
      input2: "",
    });

    this.testForm.controls['input1'].setValue("test1"); //here you can preset values if you wish.

  }

  submitForm() {
    console.log(this.testForm.get('input1')?.value)
    console.log(this.testForm.get('input2')?.value)
  }
}

<div [formGroup]="testForm">
  <mat-form-field appearance="fill" floatLabel="never">
    <input matInput placeholder="First Input" formControlName="input1" />
  </mat-form-field>
  <mat-form-field appearance="fill" floatLabel="never">
    <input matInput placeholder="First Input" formControlName="input2" />
  </mat-form-field>
  <div>
    <button mat-flat-button class="btn-small" (click)="submitForm()"> </button>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/47529327/angular-4-get-input-value