如何将子组件中的表单控件绑定到父组件表单

Question

我有一个具有反应形式的父组件，包括控件和来自组。

当选择playerType下拉列表时，我将向fromGroup添加一个formArray。新的表单数组将由 2 个或 3 个表单组组成，具体取决于玩家类型。

假设用户创建了一个玩家并选择playerType =“Mage”，那么我需要创建一个新的 配置 formGroup 内的“技能” formArray。

下面的示例 - 基本形式：

public PlayerForm: PlayerFormGroup = this.fb.group(
    {
        id: null,
        name: null, 
        life: 100, 
        playerType: null,
        configuration: this.fb.group({
            playerAllies: null
            weapons: []
        })
    
) as PlayerFormGroup;

现在玩家已创建并添加了新的 formArray。

看起来像这样：

  public PlayerForm: PlayerFormGroup = this.fb.group(
    {
        id: 1,
        name: UserMage1, 
        life: 100, 
        playerType: 2,
        configuration: this.fb.group({
            playerAllies: null
            weapons: [],
            skills: [mageSkills:[name:'', power:null, duration:0]]
        })
    
) as PlayerFormGroup;

-> 它看起来像：

id：1，

名称：'UserMage1'，

寿命：100，

玩家类型：2，

配置：

[玩家盟友：空，

武器：[]，

技能：法师技能：[0：{名称：'someName'，力量：'火'，持续时间：2}，1：{名称： '传送'，功率：'黑暗'，持续时间：4 }] ]

所以，我在节省电量和持续时间方面遇到了麻烦。

代码：

Parent TS:

public getSkillDetails(skillName: string): SkillView{
  // from child-component-configure, on selecting get the selected skill name and pass 
  // it to child-component-view-Skill-details (using event emitter)
    return this.skillsArray.find((skill) => skill.name === skillName);
  }

父 HTML:

<parent-component [formGroup]="PlayerForm" (submit)="playerForm.submit()">
      <mat-form-field>
        <mat-label>"Name"</mat-label>
        <input matInput formControlName="name">        
      </mat-form-field>
     
     <mat-form-field>
        <mat-label>"Life"</mat-label>
        <input matInput formControlName="life">        
      </mat-form-field>

    <mat-form-field>
        <mat-label>"Type"</mat-label>
        <input matInput formControlName="playerType">        
      </mat-form-field>

  <child-component-configure *ngIf="PlayerForm.control.playerType.value != null"
      [selectedSkill] = "skill"> (event emitter to pass selected skill name)
  </child-component-configure>

 <child-component-view-Skill-details [skillSelected] = "skill"> 
 </child-component-view-Skill-details [value]="getSkillDetails(this.selectedSkill)">
</parent-component>

子 HTML：

<child-component-configure>
  <mat-form-field>
        <mat-label>"Allies"</mat-label>
        <input matInput formControlName="allies">        
   </mat-form-field>

 <mat-form-field>
        <mat-label>"Weapons"</mat-label>
        <input matInput formControlName="weapons">        
  </mat-form-field>

 <mat-form-field>
        <mat-label>"Weapons"</mat-label>
        <input matInput formControlName="weapons">        
  </mat-form-field>

 </child-component-configure>

子视图-技能详情-HTML：

     <child-component-view-Skill-details> 
         <div>
          <label>Power</label>
          <input formControlName="power">        
         </div>

         <div class="slider-text">
           <label>Duration</label>
           <mat-slider
            [max]="10"
            [min]="1"
            [step]="1"
            [(ngModel)]="value.timeout">
          </mat-slider>
    </div>
    </child-component-view-Skill-details>

• 展示组件分离及其用途的图表 表单控件：

以上代码是代码的抽象。

我想找到一种方法来更改持续时间和功率并将值更新/传递到基本表单。

当前创建没问题，但是更新时 Power 和 Timeout 始终为 null 和 0。

如果我可以提供更多信息，请告诉我。

Answer 1

如果你想更新formGroup，你可以这样做

你的代码

public PlayerForm: PlayerFormGroup = this.fb.group(
    {
        id: 1,
        name: UserMage1, 
        life: 100, 
        playerType: 2,
        configuration: this.fb.group({
            playerAllies: null
            weapons: [],
            skills: [mageSkills:[name:'', power:null, duration:0]]
        })
    
) as PlayerFormGroup;

这有效！

PlayerForm = this.fb.group({
  id: new FormControl(1),
  name: new FormControl(userMage1),
  life: new FormControl(100),
  playerType: new FormControl(2),
  configuration: new FormGroup({
    playerAllies: new FormControl(null),
    weapons: new FormArray([]),
    skills: new FormArray([
      new FormGroup({
        mageSkills: new FormArray([new FormGroup({
          name: new FormControl(''),
          power: new FormControl(null),
          duration: new FormControl(0)
        })])
      })
    ])
  })
})

updatePlayer() {
  const form = this.PlayerForm.get('configuration').get('skills') as FormArray;
  const formArr = form.controls[0].get('mageSkills') as FormArray;
  const formMageSkills = formArr.controls[0]
  formMageSkills.get('name').setValue('someName')
  formMageSkills.get('power').setValue('fire')
  formMageSkills.get('duration').setValue(2)
}