如何在formGroupName内部formGroup中切换内容

Question

我的formGroup中有两个单选按钮，让我说选项-1，选项-2。在formGroup里面，让我们说它是父母，我让formGroupName说它是孩子。根据选择的单选按钮，即选项-1和选项-2，我需要改变子内容。

`MyForm : FormGroup;
initMyForm(){
  this.MyForm = this.fb.group({
   id= [''],
   key=[''],
   details= this.detailsone,//here I need to put detailone or 
                            //detailstwo based on selected radio button 
                             //(keyType)
})
}
get detailsone(){
 return this.fb.group({
   firstname:[''],
   lastname:['']
});
}
get detailstwo(){
 return this.fb.group({
   college:[''],
   subject:['']
});
}


<form [formGroup]="MyForm">
   <mat-radio-group formControlName='keyType'>
        <mat-radio-button value="option-1" >option-1</mat-radio-button>
        <mat-radio-button value="option-2" >option-2</mat-radio-button>
   </mat-radio-group>
   <div formGroupName="details">
   <div *ngIf="option-1">
      <input type='text' formControlName='firstname'>
      <input type='text' formControlName='lastname'>
   </div>
   <div *ngIf="option-2">
      <input type='text' formControlName='college'>
      <input type='text' formControlName='subject'>
   </div>
   </div>
</form>`

Answer 1

使用addControl()方法动态添加控件以形成组。

Component.ts

MyForm: FormGroup
  constructor(private fb: FormBuilder) {
    this.initMyForm();
    this.keyType.valueChanges.subscribe((value) => {
      if (value === 'option1') {
        this.MyForm.removeControl('details');
        this.MyForm.addControl('details', this.detailsOne());
      } if (value === 'option2') {
        this.MyForm.removeControl('details');
        this.MyForm.addControl('details', this.detailstwo());
      }
    });
  }

component.html

<form [formGroup]="MyForm">
    <mat-radio-group aria-label="Select an option" formControlName="keyType">
        <mat-radio-button value="option1">Option 1</mat-radio-button>
        <mat-radio-button value="option2">Option 2</mat-radio-button>
    </mat-radio-group>
    <div *ngIf="MyForm.get('details')" formGroupName="details">
        <div *ngIf="MyForm.get('keyType').value === 'option1'">
            <input type='text' formControlName='firstname'>
      <input type='text' formControlName='lastname'>
   </div>
   <div *ngIf="MyForm.get('keyType').value === 'option2'">
      <input type='text' formControlName='college'>
      <input type='text' formControlName='subject'>
   </div>
   </div>
</form>

示例