Angular 4：提交表单时控件值为空

Question

我正在尝试使用Angular实现更新表单，该表单由几个控件组成，我使用服务设置它们的值，但是当我尝试单击“提交”按钮时，我没有得到控件的值。

修改-post.component.html：

<form id='mainForm' [formGroup]="form" (ngSubmit)="submitContent()" >
<select id="optCategory" formControlName="category">
    <option value=""></option>
    <option *ngFor="let Category of categoryArray" [value]="Category.id">{{Category.postCategory}}</option>
</select>

<input type="text" placeholder="Post Subject" id="txtSubject" formControlName="txtSubject">



<input type="text" id="txtTags" name="Tags" formControlName="txtTags" placeholder="Tags">
<button id="btn" type="submit" >Submit</button>

</form>

修改-post.component.ts：

//Properties Section: 
  postDetails: Post;
  _returnedURL= '';
  isReadOnly= false;
  categoryArray= [];
  form;
     constructor(
        private _CategoriesService: GetCategoriesService, fb: FormBuilder) {
          this.isReadOnly = false;
         this.form = fb.group({
          txtTags: [''],
          category: [''],
          txtSubject: ['']
        });
     }



  ngOnInit() {
this._CategoriesService.GetCategoriesService().subscribe(function(resp){
  this.categoryArray = resp;
}.bind(this));

    this.storePostDetails();
  }


  storePostDetails() {
    this.route.paramMap.subscribe(params => {
      this.getPostDetails.GetPostDetailsService(this.PostId).subscribe( resp => {
  this.postDetails = resp;
  this.title = this.postDetails.editorContent;

      });
    });
  }

  submitContent() {   
    console.log('Subject: ' + this.form.get('txtSubject').value);
    console.log('Tags: ' + this.form.get('txtTags').value);
    console.log('Editor: ' + this.form.get('editorContent').value);
}

当页面加载时，所有控件都会填充值，但是当我按下“提交”按钮时，控制台中不会显示任何值。