Значение входного свойства Angular7 Reactive Forms не изменяется в контроллере / компоненте, только в разметке HTML

Question

Я сделал компонент многократного использования, который имеет группу реактивной формы. У меня есть 2 свойства ввода «name» и «Description», и я перебираю компонент с ngFor, чтобы установить эти свойства ввода.

К сожалению, даже если я установлю свое начальное / заданное по умолчанию значение в группе управления формой для свойств ввода, когда я нажимаю submit, angular считывает эти 2 свойства ввода как 'null' вместо значения, устанавливаемого через свойство input.

Группа форм + Свойства ввода:

  @Input() categoryID;
  @Input() categoryTitle;
  @Input() categoryDescription; 

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

Отправить функцию:

this.startLoading();

this.admin.updateCategory(this.categoryForm.value.categoryTitle, this.categoryForm.value.categoryDescription, this.categoryID)

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

Answer 1

Вы должны создать FormGroup после инициализации представления компонента. Таким образом, вы можете реализовать AfterViewInit и поместить следующий код в ngAfterViewInit function.

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