CODEWITHSUNDEEP
angulartypescriptprimengangular-reactive-forms
Guilherme Lucas
Guilherme Lucas

Reputation: 497

Change form depending on radio button with reactive forms - Angular 2+

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

<div class="ui-g-12 ui-md-12 ui-lg-12 ui-fluid espacamento-baixo">
            <div class="ui-g-3"><p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="imagem" label="Imagem" inputId="imagem"></p-radioButton></div>
            <div class="ui-g-3"><p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="video" label="Video" inputId="video"></p-radioButton></div>
            <div class="ui-g-3"><p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="link" label="Link" inputId="link"></p-radioButton></div>
            <div class="ui-g-3"><p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="wistia"label="Wistia" inputId="wistia"></p-radioButton></div>    
        </div>

        <div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo">
            <div *ngIf="radioForm == 'wistia'" >
                <p> aqui seu formulario para {{ radioForm }}</p>
            </div>
        </div>

        <div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo">
            <div *ngIf="radioForm == 'imagem'" >
                <p> aqui seu formulario para {{ radioForm }}</p>
            </div>
        </div>

        <div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo">
            <div *ngIf="radioForm == 'link'">
                <p> aqui seu formulario para {{ radioForm }}</p>
            </div>
        </div>

        <div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo">
            <div *ngIf="radioForm == 'video'">
                <p> aqui seu formulario para {{ radioForm }}</p>
            </div>
        </div>

I tested these two modes for validation and did not succeed

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]  
    });

Or

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]))
     });

Upvotes: 2

Views: 2636

Answers (1)

macvag
macvag

Reputation: 411

formControlName is the children of FormGroup part of ReactiveFormsModule and ngModel is part of FormsModule. You have not declared a FormGroup that exist the formControlName in your template.

If you want to track the value of select you don't need a specific FormGroup, just bind the value of the select.

I simplify a little bit your logic and created a Stackblitz demo https://stackblitz.com/edit/angular-smu83a

There I am getting the value of the select and displaying the corresponding form.

To learn more info read the official documentation that has and examples https://angular.io/guide/forms-overview

Upvotes: 2

Related Questions