Angular父组件(Course)向子组件(Update)传值及表单数据回显失败问题求助

Hey there! Let's get to the bottom of why your edit form isn't showing the course data when you click the edit button. The core issue here is that even though you're passing the selected course to the child component via @Input, you're not syncing that incoming data to your reactive form once it changes. Let's break down the fixes step by step.

What's going wrong with your current code? #

Your form gets initialized once in ngOnInit when the child component loads. When you click the edit button in the parent, you update selectedCourse and pass it to the child's updateData property—but the child component doesn't automatically detect this change and update the form values. That's why your inputs stay empty!

Fix 1: Listen for @Input changes with ngOnChanges #

We'll use Angular's ngOnChanges lifecycle hook to detect when updateData updates, then populate the form with the new values. Here's how to modify your update.component.ts:

First, add the required imports:

import { Component, Input, OnInit, OnChanges, SimpleChange } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

Then update your component class to implement the OnChanges interface and add the hook:

export class UpdateComponent implements OnInit, OnChanges {
  @Input() updateData: any;
  parentFormGroup: FormGroup;

  constructor(private childFormGroup: FormBuilder) { }

  ngOnInit(): void {
    this.myForm();
  }

  // Triggered whenever any @Input property changes
  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    // Check if updateData has a valid new value
    if (changes['updateData'] && this.updateData) {
      this.fillFormWithCourseData(this.updateData);
    }
  }

  myForm(){
    this.parentFormGroup = this.childFormGroup.group({
      data: this.childFormGroup.group({
        courseName: ["", Validators.required],
        courseDuration: ["", Validators.required]
      })
    })
  }

  // Helper method to sync course data to the form
  fillFormWithCourseData(course: any) {
    this.parentFormGroup.patchValue({
      data: {
        courseName: course.courseName,
        courseDuration: course.courseDuration
      }
    });
  }

  showEditModal(){
    $('#editModal').modal('show');
  }

  formSubmit() {
    // Your submit logic here
  }
}

Fix 2: Optional check for parent component data assignment #

In your course.component.ts, you can optionally create a copy of the course object to avoid mutating the original (this helps prevent unexpected side effects):

handleEditCourse(temp: Course){
  // Create a shallow copy of the course object
  this.selectedCourse = { ...temp }; 
  this.updateComponent.showEditModal();
}

Why this works #

• ngOnChanges catches the update to updateData right after you click the edit button.
• patchValue safely updates the reactive form controls with the selected course's details, making the data appear in your modal inputs.

Just a quick side note: Double-check that your Bootstrap modal's HTML (the #editModal element) is properly structured—you didn't include it in your snippet, but it needs to exist for the modal to work as expected.

备注：内容来源于stack exchange，提问作者Ninoos Al Katoni