title: Change form depending on radio button with reactive forms - Angular 2+
body: <p>I have 3 radio buttons, when I click on each one should appear a different forms.
  But I'm having problem with reactive forms coming into conflict with formcontrol</p>
  
  <pre><code>&lt;div class="ui-g-12 ui-md-12 ui-lg-12 ui-fluid espacamento-baixo"&gt;
              &lt;div class="ui-g-3"&gt;&lt;p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="imagem" label="Imagem" inputId="imagem"&gt;&lt;/p-radioButton&gt;&lt;/div&gt;
              &lt;div class="ui-g-3"&gt;&lt;p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="video" label="Video" inputId="video"&gt;&lt;/p-radioButton&gt;&lt;/div&gt;
              &lt;div class="ui-g-3"&gt;&lt;p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="link" label="Link" inputId="link"&gt;&lt;/p-radioButton&gt;&lt;/div&gt;
              &lt;div class="ui-g-3"&gt;&lt;p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="wistia"label="Wistia" inputId="wistia"&gt;&lt;/p-radioButton&gt;&lt;/div&gt;    
          &lt;/div&gt;
  
          &lt;div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo"&gt;
              &lt;div *ngIf="radioForm == 'wistia'" &gt;
                  &lt;p&gt; aqui seu formulario para {{ radioForm }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo"&gt;
              &lt;div *ngIf="radioForm == 'imagem'" &gt;
                  &lt;p&gt; aqui seu formulario para {{ radioForm }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo"&gt;
              &lt;div *ngIf="radioForm == 'link'"&gt;
                  &lt;p&gt; aqui seu formulario para {{ radioForm }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo"&gt;
              &lt;div *ngIf="radioForm == 'video'"&gt;
                  &lt;p&gt; aqui seu formulario para {{ radioForm }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I tested these two modes for validation and did not succeed</p>
  
  <pre><code>ngOnInit() {
      //passando um objeto javascript
      this.formConteudo = this.formBuilder.group({
        titulo: ['', Validators.required],
        modalidade: ['', Validators.required],
        descricao: ['', Validators.required],
        id: ['', Validators.required],
        nivel: ['', Validators.required]  
      });
  </code></pre>
  
  <p>Or</p>
  
  <pre><code>this.formConteudo = new FormGroup({
         titulo: new FormControl({ value: '' }, Validators.compose([Validators.required])),
         modalidade: new FormControl({ value: '' }, Validators.compose([Validators.required])),
         descricao: new FormControl({ value: '' }, Validators.compose([Validators.required])),
         id: new FormControl({ value: '' }, Validators.compose([Validators.required])),
         nivel: new FormControl({ value: '' }, Validators.compose([Validators.required]))
       });
  </code></pre>