如何在表单标签中使用ngModel?

在Angular中，我们可以使用ngModel指令双向绑定表单数据，这样可以方便的在组件中操作表单数据。当我们使用ngModel指令时，必须注意下面的一些规则：

1. 在表单标签中使用ngModel，必须设置name属性，这个name属性应该和组件中定义的FormControl名称一致，这样就可以让Angular自动关联这两者。

<form>
  <label for="name">Name</label>
  <input type="text" name="name" [(ngModel)]="name">
</form>

2. 如果我们不想在表单标签中设置name属性，那么可以在ngModelOptions中将表单控件定义为“独立”(standalone)，这样可以消除Angular中需要FormControl和表单控件相互关联的要求。

<form>
  <label for="name">Name</label>
  <input type="text" ngModel [ngModelOptions]="{standalone: true}" />
</form>

3. 我们还可以通过ngModelChange事件来监听表单数据的变化，这样就可以在组件中根据数据的变化来执行一些逻辑。

<form>
  <label for="name">Name</label>
  <input type="text" name="name" [(ngModel)]="name" (ngModelChange)="onNameChange($event)">
</form>

@Component({
  ...
})
export class AppComponent {
  name: string;

  onNameChange(newName: string) {
    console.log('newName:', newName);
  }
}

总之，在使用ngModel指令时，我们需要遵循上述规则，这样才能让Angular自动关联表单控件和FormControl，方便我们在组件中操作表单数据