如何將數據傳遞給 Angular 中另一個組件中的表單

Question

我在一個單獨的組件中有一個表單，如下所示：

<form [formGroup]="form">
    <div class="card" style="margin-bottom: 10px" >
    <input 
        formControlName="name" 
        type="text"
        placeholder="please enter"
        />
</div>
</form>

ts 文件看起來像這樣（formcontrol 部分）

 form = this.builder.group({
    name: new FormControl(),
  })

這就是我從另一個組件中調用它的方式：組件 B：

 <form></form>

我現在想要實現的是以下我從我的后端填充一些有效的值，我知道想將這些值從表單組件分配給我的表單。 我知道我必須使用@Input 我有點卡在牆上，不知道如何連接它們。 有人可以給我一個小例子，我可以如何從組件 b 的值中填寫我的表單嗎？

據我所知，我已經發布了這個問題最重要的部分，如果需要其他任何內容，請隨時詢問

UPDATE_Form.ts

@Input()
  myObject: { name: string };

  form = this.builder.group({
      name: new FormControl()
  });

  ngOnChanges(changes: SimpleChanges): void {
      if (changes.myObject?.currentValue) {
          this.form.patchValue(this.myObject);
      }
  }

Answer 1

form.component.ts

@Component({
    selector: 'my-form'
    ...
})
export class FormComponent implements OnChanges {
    
    @Input()
    myObject: { name: string };

    form = this.builder.group({
        name: new FormControl()
    });

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.myObject?.currentValue) {
            this.form.patchValue(this.myObject);
        }
    }
}

form.component.html

<form [formGroup]="form">
  <div class="card" style="margin-bottom: 10px" >
    <input 
        formControlName="name" 
        type="text"
        placeholder="please enter" />
  </div>
</form>

調用.component.ts

@Component({ ... })
export class CallingComponent {
    
    someObject: { name: string };

    loadData(): void {
        this.someObject = ...
    }
}

調用.component.html

<my-form [myObject]="someObject">
</my-form>