Angular Reactive Forms default value of input for updating data is 'undefined' when submitting although binding to value property not placeholder

Question

I have made a reusable component in Angular that I'm using to build multiple forms for the purpose of priving a quick way to modify multiple data-items.

I have 2 input fields in this component that I'm binding via input properties when iterating on an array with *ngFor. All is well and works well with ids and showing the data but the problem that I'm having is when I'm pushing to update the value of those 2 fields show up as 'undefined' (unless I modify them).

My Markup is:

<input 
      #catTitle
      matInput 
      placeholder="Document Title" 
      [value]="categoryTitle"
      formControlName="categoryTitle"
      [errorStateMatcher]="matcher"
      >

My backend is:

  categoryForm = new FormGroup({
    categoryTitle: new FormControl('', [Validators.minLength(3), Validators.maxLength(50)]),
    categoryDescription: new FormControl('', [Validators.minLength(5), Validators.maxLength(200)])
  })

I'm sure I'm missing out on something really stupid on this one.

Answer 1

VI realized shortly that in my code I set the default value of the Form Control to blank here: categoryTitle: new FormControl('' and have since modified to take a variable there and made sure it's not set as 'null' by creating the form after view init.