如何将数据传递给 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>