Angular中如何向另一个组件内的表单传递数据

基础实现步骤 #

1. 子表单组件（你定义的独立表单组件） #

ts代码：

import { Component, Input, SimpleChanges } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'gwg-form', // 和父组件调用的标签名对应
  templateUrl: './gwg-form.component.html'
})
export class GwgFormComponent {
  // 定义接收父组件传值的Input入口
  @Input() formValue: {name?: string} = {};

  form: FormGroup;

  constructor(private builder: FormBuilder) {
    this.form = this.builder.group({
      name: new FormControl('')
    });
  }

  // 监听传值变化，自动更新表单内容
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['formValue']?.currentValue) {
      this.form.patchValue(changes['formValue'].currentValue);
    }
  }
}

html代码：

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

2. 父组件（组件B）调用逻辑 #

ts代码：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-parent-b',
  templateUrl: './parent-b.component.html'
})
export class ParentBComponent {
  parentForm: FormGroup;
  // 存储要传给子表单的数值
  childFormData = {name: ''};

  constructor(private builder: FormBuilder) {
    this.parentForm = this.builder.group({
      legitimiertePersonNameField: ['']
    });
  }

  // 模拟后端接口返回后的赋值逻辑
  afterFetchResponse(response: any) {
    this.parentForm.controls.legitimiertePersonNameField.setValue(response.vorname);
    // 给子表单传参的对象赋值，字段名和子表单字段对应
    this.childFormData.name = this.parentForm.controls.legitimiertePersonNameField.value;
  }
}

html代码：

<!-- 父组件自有表单 -->
<form [formGroup]="parentForm">
  <!-- 父组件自有表单字段 -->
</form>

<!-- 调用子表单组件传入数值 -->
<gwg-form [formValue]="childFormData"></gwg-form>

你当前代码赋值失败的修复方案 #

你当前问题的核心是传入@Input的参数类型不匹配：子组件定义的myObject是{name: string}类型的对象，但是父组件传的someName是字符串类型，patchValue无法在字符串中匹配到name字段，自然无法赋值成功。

任选以下一种方案修复即可：

• 方案1：不改动子组件逻辑，仅修改父组件传参结构
  父组件html调用代码修改为：

  <gwg-form [myObject]="{name: someName}"></gwg-form>
  

• 方案2：调整子组件逻辑，直接接收字符串参数
  子组件ts代码修改为：

  @Input() nameValue: string = '';
  
  form = this.builder.group({
    name: new FormControl()
  });
  
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['nameValue']?.currentValue) {
      this.form.get('name')?.setValue(changes['nameValue'].currentValue);
    }
  }
  

  父组件html调用代码修改为：

  <gwg-form [nameValue]="someName"></gwg-form>
  

内容的提问来源于stack exchange，提问作者natyus