Angular 2，设置表单中文本输入的值

typescript

Angular 2 中如何设置表单中文本输入的值

在 Angular 2 中，我们经常需要处理表单，并设置表单中各个输入字段的值。当涉及到文本输入字段时，我们需要确保我们能够正确地设置中文值，以便与用户进行交互和数据传输。

在 Angular 2 中，我们可以使用双向数据绑定来设置文本输入字段的值。双向数据绑定允许我们将数据模型与视图中的输入字段进行关联，从而实现数据的自动更新。

首先，我们需要在组件中定义一个变量来保存文本输入字段的值。例如，我们可以定义一个名为 "textInput" 的变量来保存文本输入字段的值：

typescript
textInput: string;

接下来，我们需要在 HTML 模板中设置文本输入字段，并将其与组件中的变量进行绑定。我们可以使用 [(ngModel)] 指令来实现双向数据绑定。例如，我们可以将文本输入字段与组件中的 "textInput" 变量进行绑定：

html
<input type="text" [(ngModel)]="textInput">

这样，当用户在文本输入字段中输入内容时，组件中的 "textInput" 变量会自动更新。同样地，如果我们在组件中设置 "textInput" 变量的值，文本输入字段中的值也会自动更新。

案例代码：

下面是一个简单的例子，演示了如何在 Angular 2 中设置表单中文本输入的值。我们将创建一个简单的组件，包含一个文本输入字段和一个按钮。当用户点击按钮时，我们将设置文本输入字段的值为 "你好，世界！"。

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: <code>
    <input type="text" [(ngModel)]="textInput">
    <button (click)="setTextInputValue()">设置值</button>
  </code>
})
export class AppComponent {
  textInput: string;
  setTextInputValue() {
    this.textInput = "你好，世界！";
  }
}

在上面的代码中，我们定义了一个名为 "textInput" 的变量来保存文本输入字段的值。当用户点击按钮时，我们调用 "setTextInputValue()" 方法，将 "textInput" 变量的值设置为 "你好，世界！"。由于我们使用了双向数据绑定，文本输入字段中的值也会自动更新。

在 Angular 2 中，我们可以使用双向数据绑定来设置表单中文本输入的值。通过将文本输入字段与组件中的变量进行绑定，我们可以实现自动更新，从而方便地与用户进行交互和传输数据。

无论是简单的表单还是复杂的用户界面，Angular 2 提供了强大的功能来处理各种输入字段，并确保我们能够轻松地设置和获取文本输入字段的值。

参考代码：

https://github.com/angular/angular.io/blob/1a25b0a/src/app/toh/toh.component.ts