Angular Reactive Forms значение по умолчанию для ввода данных для обновления данных «неопределено» при отправке, хотя привязка к свойству значения не заполнитель

Question

Я создал в Angular многократно используемый компонент, который я использую для создания нескольких форм с целью обеспечения быстрого способа изменения нескольких элементов данных.

У меня есть 2 поля ввода в этом компоненте, которые я связываю через свойства ввода при итерации массива с * ngFor. Все хорошо и хорошо работает с идентификаторами и отображением данных, но проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь обновить значение, эти два поля отображаются как «неопределенные» (если я не изменяю их).

Моя разметка:

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

Мой бэкэнд:

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

Я уверен, что упускаю что-то действительно глупое в этом.

Answer 1

Вскоре VI понял, что в своем коде я установил здесь значение по умолчанию для элемента управления формы пустым: categoryTitle: new FormControl('' и с тех пор изменил его, чтобы принять переменную там, и удостоверился, что он не установлен как 'нулевой', создав форму после просмотр init.