ngModel 双向绑定（初学者易错点）

ngModel 大致介绍：

NgModel指令数据绑定常用于开发表单的场景，数据绑定如下：

<input [(ngModel)]="model.name">

这种常用的写法类似一种语法糖，其实相当于如下写法：

<input
  [ngModel]="model.name"
  (ngModelChange)="model.name=$event">

注意点：

在学习过程中遇到了一些问题，设计表单时，如下代码就会报错：

<form >
<input type="text"  [(ngModel)]="model.name" required>
<p>model.name:{{model.name}}</p>
</form>

报错信息：

 ERROR 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}">

解决方案：

报错给出了2种解决方案，但一般常用第一种方案，就是必须加上name属性，修改如下：

<form >
<input type="text" name="name"  [(ngModel)]="model.name" required>
<p>model.name:{{model.name}}</p>
</form>

经查看Angular官方文档，叙述如下：

Defining a name attribute is a requirement when using [(ngModel)] in combination with a form.

当在表单中使用[(ngModel)]时，必须要定义name属性。