在这个内容编辑组件里面可以添加一个编辑内容用的表单，打开这个组件，这个表单可以用 formBuilder 去创建一个，把它作为这个组件的依赖注入进来，private formBuilder，类型是 FormBuilder。

想在这个组件里使用这个东西还得在组件所属的模块里导入 ReactiveFormsModule 模块，打开 PostModule 模块，在它的 imports 里面，添加一个 ReactiveFormsModule ，它来自 @angular/forms 。

回到 PostEditComponent 组件，在组件里面，添加一个 postEditForm ，它的值用一下 this.formBuilder 上的 group 方法，给它一个对象，里面是表单里的一些元素。

内容有 title，image 还有 body 属性，所以在这个表单里也可以添加对应名字的表单元素，添加一个 title，一个数组，第一个项目是空白。再添加一个 body，它的初始值也是空白。最后再添加一个 image，一个数组，项目的默认的值也是空白。

模板

打开组件的模板文件，里面先用一组 form 元素，元素上面用一个 formGroup，值是组件里的 postEditForm。

表单里面添加几个表单元素，一组 label，一个段落，文字是 Title，下面放一个 text 类型的 input，在它上面还得用一下 formControlName，把 postEditForm 里的 title 绑定在这里。

复制一份，修改一下标签文字，换成 Image，再修改一下 formControlName 的值，换成 image。

下面再添加一个文本区域，一组 label ，标签文字是 Body，下面再添加一组 textarea，上面加上一个 formControlName ，值是 body 。

这个表单上可以再添加一个返回上一级路由的链接，一个段落，里面是 strong ，包装一个 small，它里面是个 a 标签，文字是 Back，链接上用一个 routerLink，值是 ../ 表示上一级路由。

在 form 上监听一下 ngSubmit 事件，用组件里的 onSubmit 方法处理提交表单。

回到组件，可以去添加需要的这个方法，名字是 onSubmit() ，这个方法做的事情，可以先简单的在控制台上输出表单里的值。console.log，输出 this.postEditForm.value 。

在这个表单里还得再添加一个提交按钮，放在一组段落标签里面，用一组 button 标签，文字是 Update，设置一下这个按钮的类型，type 等于 submit。

预览

在浏览器上可以预览一下这个编辑内容用的表单，随便在表单里输入点内容，然后按一下 Update 按钮，提交表单。控制台上会输出表单里面的当前的值。

这个文本区域的样式可以稍微改一下，回到项目，打开应用的全局样式表，找到这块设置 input 元素的样式，逗号分隔一下，里面再添加一个 textarea。

回到视图，在这个 textarea 元素上面，可以再用一个 rows 属性，它的值先设置成 10 。 然后再回到编辑内容页面预览一下这个编辑内容用的表单。