Change the Subform component depending on a select-CodePudding

I have a reactive form with a simple select. Depending on the value different subform should be shown. Every subform has its own formgroup. Currently I can show the different subforms and I can add the formgroups. But I only want to use the selected formgroup. And if I save my form, I only want to save the selected subform.

selection.html

<form [formGroup]="myform" (ngSubmit)="onSubmit()">
    <div>
        <input type="radio" name="selection" value="selection1" formControlName="selection">
        <label>Selection 1</label>
    </div>
    <div>
        <input type="radio" name="selection" value="selection2" formControlName="selection">
        <label>Selection 2</label>
    </div>
    <div>
        <input type="radio" name="selection" value="selection3" formControlName="selection">
        <label>Selection 3</label>
    </div>          
    <hr>
    <div >
        <app-subform1 *ngIf="myform.get('selection').value == 'selection1'"></app-subform1>
        <app-subform2 *ngIf="myform.get('selection').value == 'selection2'"></app-subform2>
        <app-subform3 *ngIf="myform.get('selection').value == 'selection3'"></app-subform3>
    </div>
    <div>
        <button 
            type="submit" 
            [disabled]="!myform.valid">Save</button>
    </div>
</form>

selection.ts

import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-selection',
  templateUrl: './selection.component.html',
  styleUrls: ['./selection.component.css']
})
export class SelectionComponent implements OnInit{
  myForm: FormGroup;  

  constructor() { } 

  ngOnInit(): void {
    this.initForm();
  }

  initForm() {
    this.myForm = new FormGroup({
      'selection': new FormControl('', Validators.required),      
    });
  }

  onSubmit() {
  }
}

subform1.html

<div formGroupName="subform1">
    <label>Subform1 value:</label>
    <input type="text" formControlName="textvalue">
</div>

subform1.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, ControlContainer, FormGroupDirective } from '@angular/forms';

@Component({
  selector: 'app-subform1',
  viewProviders: [
    { provide: ControlContainer, useExisting: FormGroupDirective}
   ],   
  templateUrl: './subform1.component.html',
  styleUrls: ['./subform1.component.css']
})
export class Subform1Component {
  
  constructor(
    private parent: FormGroupDirective) { 
      this.initForm();
    }

  initForm() {
    this.parent.form.addControl('subform1', new FormGroup({
      'textvalue': new FormControl('', Validators.required),
    }));
  }
}

CodePudding user response：

try using valuechanges

condition: any;

  form:FormGroup = new FormGroup({
    selection:new FormControl('')
  })

  ngOnInit(): void {
    this.form.get('selection')?.valueChanges.subscribe(option=>{
      this.condition = option;
    })
  }

and use ngif with condition