在 Angular 中使用表单是非常常见的任务，而双向绑定是 Angular 最强大的特性之一，因此使用 ngModel 指令双向绑定表单数据是一个值得学习的技巧。本篇文章将详细介绍在 Angular 7 中如何使用 ngModel 指令双向绑定表单，并提供详细的代码示例以供学习和参考。
ngModel 指令简介
在 Angular 中，ngModel 是一个用于双向绑定表单元素的指令。它可以将表单中的数据与组件中的数据进行绑定，从而实现表单数据的自动更新。
ngModel 指令通过 [(ngModel)] 语法来实现表单数据的双向绑定。这意味着你可以从表单元素中获取数据并更新组件内的变量，也可以在组件中更新变量并将其自动反映在表单元素上。
ngModel 指令的使用
使用 ngModel 指令双向绑定表单比较简单，主要涉及到以下几个步骤：
在 HTML 表单元素上添加 ngModel 指令。
在组件中定义一个变量用于保存表单数据，并将其初始化为默认值。
在组件类中定义一个方法来处理表单数据的更新。
在 HTML 中使用 [(ngModel)] 语法将表单元素与组件变量进行绑定。
下面我们将使用一个简单的例子来说明 ngModel 指令的使用。
示例代码
app.component.html:
<form>
<div>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" [(ngModel)]="firstName">
</div>
<div>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" [(ngModel)]="lastName">
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" [(ngModel)]="email">
</div>
<div>
<button type="button" (click)="submit()">Submit</button>
</div>
</form>app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
firstName: string;
lastName: string;
email: string;
constructor() {
this.firstName = '';
this.lastName = '';
this.email = '';
}
submit() {
console.log('First Name:', this.firstName);
console.log('Last Name:', this.lastName);
console.log('Email:', this.email);
}
}在以上代码中，我们简单地创建了一个包含三个表单元素和一个提交按钮的表单。通过添加 [(ngModel)] 指令，我们实现了表单数据的双向绑定，使得表单数据可以与组件中的变量进行同步。
在组件类中，我们定义了三个变量来保存表单数据，并在 submit() 方法中使用 console.log() 输出了表单数据，以便我们可以在控制台中查看其内容。
总结
在使用 Angular 开发前端应用时，经常需要使用表单来收集、处理和提交数据。在表单中使用 ngModel 指令可以显著提高开发效率，也可以使代码更简洁和易于维护。
本篇文章中，我们详细介绍了在 Angular 7 中如何使用 ngModel 指令双向绑定表单数据，并提供了完整的代码示例。希望这篇文章可以帮助到大家学习和掌握 Angular 的表单操作技巧。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65af8e6dadd4f0e0ff900cc9