Angular 2模板代码技术咨询：类属性定义与ngModel语法疑问

嘿，刚上手Angular 2是吧？我来帮你把这两个问题讲明白～

1. 对应的组件类中需要定义哪些属性？ #

你需要在组件类里定义两个核心属性，再配合表单初始化的逻辑：

• myForm: FormGroup：这是响应式表单的表单组实例，用来管理productName这个表单控件，模板里的myForm.get('productName')就是从这个组里获取对应控件的。
• productName: string：这是用来和输入框做双向绑定的变量，存储用户输入的产品名称值，也可以给它设置初始值（比如空字符串）。

另外还要记得导入表单相关依赖，并且在组件初始化时创建表单实例。给你个完整的组件类示例：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  // 表单组实例
  myForm: FormGroup;
  // 双向绑定的产品名称变量
  productName: string = '';

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单，添加productName控件
    this.myForm = this.fb.group({
      productName: [''] // 控件初始值为空
    });
  }
}

2. ngModel外围的括号组合有什么作用？ #

[(ngModel)]是Angular的双向数据绑定语法糖，拆解来看：

• 单中括号[]是属性绑定：把组件类里的productName值同步到输入框的显示内容上；
• 单小括号()是事件绑定：监听输入框的input事件，把用户输入的内容同步回组件类的productName变量里。

合在一起的[(ngModel)]就实现了「组件类数据 ↔ 模板输入框」的实时双向同步：用户输入时组件变量自动更新，代码里修改变量时输入框内容也会跟着变。

另外要注意，你这里同时用了[formControl]和[(ngModel)]，这是Angular允许的混合用法（兼容响应式和模板驱动表单），但要确保你的模块里已经导入了FormsModule和ReactiveFormsModule哦。

内容的提问来源于stack exchange，提问作者crowley