angular 7 ngmodel组件和表单绑定

Angular 7中的ngModel组件是一个表单绑定的指令，用于实现双向数据绑定。它与Angular的表单模块一起使用，可以方便地将表单中的输入元素与组件中的属性进行绑定。

ngModel组件的主要作用是在表单中获取和设置输入元素的值。通过将ngModel指令应用于输入元素，我们可以将输入元素的值绑定到组件中定义的属性上。当输入元素的值发生变化时，属性值也会相应地更新，反之亦然。

ngModel组件还提供了一些额外的功能，如表单验证和状态追踪。我们可以通过设置ngModel指令的属性来定义输入元素的验证规则，以及访问输入元素的状态，如是否被触摸过、是否有效等。

在Angular 7中，ngModel组件的使用步骤如下：

1. 导入FormsModule：在组件的模块文件中导入FormsModule，以便使用ngModel指令。

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ]
})
export class YourModule { }

1. 应用ngModel指令：在模板中的输入元素上应用ngModel指令，并将其绑定到组件的属性上。

<input [(ngModel)]="property" />

1. 配置表单验证（可选）：通过设置ngModel指令的属性来定义输入元素的验证规则。

<input [(ngModel)]="property" required minlength="5" />

在这个例子中，输入元素被设置为必填项，并且最小长度为5个字符。

总结： ngModel组件是Angular 7中用于表单绑定的指令，可实现双向数据绑定。它可以方便地将表单中的输入元素与组件中的属性进行绑定，并提供了表单验证和状态追踪的功能。在使用ngModel组件时，需要导入FormsModule模块并应用ngModel指令到相应的输入元素上。