Angular 提供了两种风格的表单,一种是 Reactive Forms,还有一种是 Template-driven 类型的表单。下面我们要介绍使用的是 Reactive Forms。
要使用这种类型的表单,需要在模块里导入 ReactiveFormModule,我打算要之前创建的 Register 组件里创建一个这样的表单,这个组件属于 UserModule 模块,所以要在这个模块里导入 ReactiveFormsModule。
打开 UserModule,先在文件的顶部,从 @angular/forms 这个包里面,导入一个 ReactiveFormsModule 。
然后在模块的 imports 里面,添加一个 ReactiveFormsModule,这个模块来自 @angular/forms 这个包。
FormControl
然后打开 RegisterComponent 组件,在组件里可以先添加一些 FormControl,然后在把它们绑定在组件的视图上使用。比如添加一个 username 属性,它的值新建一个 FormControl,这个 FormControl 来自 @angular/forms 包。
[FormControl]
有了这个 FormControl 实例以后就可以把它绑定在视图上使用,打开这个组件的模板文件,先添加一组 label,标签。标签文字用一组段落标签包含一下,文字是 Username 。
然后添加一个 input 元素,类型是 text,在这个元素上可以绑定在组件里创建的 username,这里需要用 formControl 指令,它的值是 username 。这个 username 就是在 Register 组件里的一个 FormControl 实例。
预览
回到浏览器,预览一下,打开 register 这个地址,页面上会显示一个文本类型的表单元素。