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

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

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

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

  @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)

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


angular angular7 angular-reactive-forms angular-forms angular-changedetection
person SebastianG    schedule 29.10.2018    source источник
comment
Вы пробовали привязку данных: [value]="categoryTitle"?   -  person Aluan Haddad    schedule 29.10.2018
comment
@AluanHaddad Я делаю это уже в разметке, и это работает, и все в порядке, но когда я нажимаю кнопку отправки в реальном контроллере, значение по умолчанию в форме не совпадает с значением по умолчанию, отображаемым в разметке, и не обязательно синхронизируется. Однако решение, представленное ниже, работало.   -  person SebastianG    schedule 29.10.2018

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны создать 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)])
  })
}
person Sunil Singh    schedule 29.10.2018
comment
Проклятие! спасибо - я сделал это через ngOnInit, и, похоже, это тоже сработало, в конце концов, простое решение после стольких хлопот! - person SebastianG; 29.10.2018