В Angular получение текстовых значений из пользовательского ввода — обычная задача. В этом сообщении блога мы рассмотрим шесть простых и эффективных методов достижения этой цели с помощью TypeScript. Независимо от того, являетесь ли вы новичком или опытным разработчиком Angular, эти методы помогут вам легко обрабатывать входные значения. Итак, приступим!

Метод 1: ссылочные переменные шаблона
Один из самых простых способов получить входные текстовые значения в Angular — использовать ссылочные переменные шаблона. Назначив ссылочную переменную входному элементу, вы можете получить доступ к ее значению в коде вашего компонента. Вот пример:

<input type="text" #myInput>
<button (click)="getValue(myInput.value)">Get Value</button>

getValue(value: string) {
  console.log(value);
}

Метод 2: двусторонняя привязка данных
Angular предоставляет мощную функцию, называемую двусторонней привязкой данных, которая позволяет привязывать свойство как к входному элементу, так и к компоненту. Используя директиву [(ngModel)], вы можете легко получить и обновить входное текстовое значение. Вот пример:

<input type="text" [(ngModel)]="myValue">
<p>{{ myValue }}</p>

Метод 3: реактивные формы
Если вы работаете со сложными формами, рекомендуем использовать реактивные формы. Создав FormGroup и FormControl, вы можете легко получить входное текстовое значение. Вот пример:

<form [formGroup]="myForm">
  <input type="text" formControlName="myInput">
</form>
<button (click)="getValue(myForm.get('myInput').value)">Get Value</button>

myForm = new FormGroup({
  myInput: new FormControl('')
});
getValue(value: string) {
  console.log(value);
}

Метод 4: @ViewChild
Декоратор @ViewChild позволяет получить доступ к ссылке на дочерний компонент или элемент в родительском компоненте. Используя его с ElementRef, вы можете получить входное текстовое значение. Вот пример:

<input #myInput type="text">
<button (click)="getValue()">Get Value</button>

@ViewChild('myInput', { static: true }) myInput: ElementRef;
getValue() {
  console.log(this.myInput.nativeElement.value);
}

Метод 5: привязка событий
Вы также можете получить входное текстовое значение, используя привязку событий. Прослушивая событие ввода, вы можете записать значение, введенное пользователем. Вот пример:

<input type="text" (input)="getValue($event.target.value)">

getValue(value: string) {
  console.log(value);
}

Метод 6: директива NgForm
Если вы работаете со встроенным модулем форм Angular, вы можете использовать директиву NgForm для получения входного текстового значения. Вот пример:

<form #myForm="ngForm">
  <input type="text" name="myInput" ngModel>
</form>
<button (click)="getValue(myForm.value.myInput)">Get Value</button>

getValue(value: string) {
  console.log(value);
}

В этой статье мы рассмотрели шесть различных методов получения входных текстовых значений в Angular с использованием TypeScript. Используя ссылочные переменные шаблона, двустороннюю привязку данных, реактивные формы, @ViewChild, привязку событий и директиву NgForm, вы можете выбрать подход, который лучше всего соответствует вашим потребностям. Эти методы, несомненно, облегчат вашу жизнь при работе с входными текстовыми значениями в Angular.