CODEWITHSUNDEEP
htmlangularforms
learner
learner

Reputation: 505

Angular handling conditional driven form

I am very new to Angular, I am using template driven form. I have two questions in a form as radio buttons (shown below) , My use case is that, Once user answers both these questions, based on his/her response, I need to show another set of questions. So, if answer to any of the 2 question is "yes", then I need to show another set of question.If answer to both question is "no", then I need not show another set of question. Pls help how to achieve it.

My template and component.ts file are shown below. I tried to use "*ngIf" with condition *ngIf="Question1 || Question2", but this doesn't work because as soon as the first question is answered "yes", it displays section with text " Show rest questions". Please see my sample code below. I want that when user answers both the questions, then only the div with text "Show rest questions" or "Don't Show rest questions" should be displayed, based on the response.

<div class="form-group">
          <div class="form-group col-md-12">
            <label>Question 1?</label>
            <input type="radio" name="Question1" [(ngModel)]="Question1" value="yes">Yes
            <input type="radio" name="Question1" [(ngModel)]="Question1" value="no">No
          </div>
          <div class="form-group col-md-12">
            <label>Question 2?</label>
            <input type="radio" name="Question2" [(ngModel)]="Question2" value="yes">Yes
            <input type="radio" name="Question2" [(ngModel)]="Question2" value="no">No
          </div>
</div>  

 <div align="center" *ngIf="Question1 || Question2">
          Show rest questions
        </div>

 <div align="center" *ngIf="Question1 && Question2">
          Don't show rest questions
        </div>

Below is my partial component.ts

export class Component1 implements OnInit {
  public Question1:string;
  public Question2:string;
}

Upvotes: 2

Views: 670

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

this value="yes" will set the selected value to a string , if you want to set the value to true / false try like this 

<div class="form-group">
          <div class="form-group col-md-12">
            <label>Question 1?</label>
            <input type="radio" name="Question1" [(ngModel)]="Question1" [value]="true">Yes
            <input type="radio" name="Question1" [(ngModel)]="Question1" [value]="false">No
          </div>
          <div class="form-group col-md-12">
            <label>Question 2?</label>
            <input type="radio" name="Question2" [(ngModel)]="Question2" [value]="true">Yes
            <input type="radio" name="Question2" [(ngModel)]="Question2" [value]="false">No
          </div>
</div>

then you can use ngIf to show another section like this 

 <div align="center" *ngIf="Question1 || Question2; else noQuestions ">
          Show rest questions
  </div>


<ng-template #noQuestions>
         .....
</ng-template>

Question1 || Question2 will become true of any of the answer is selected yes , or you can show the rest in both of the answer is yes like this Question1 && Question2

demo 🚀🚀

updated!! ⚡⚡

set the value to true/false will limt our checking of the selected cases 

<div class="form-group">
          <div class="form-group col-md-12">
            <label>Question 1?</label>
            <input type="radio" name="Question1" [(ngModel)]="Question1" value="yes">Yes
            <input type="radio" name="Question1" [(ngModel)]="Question1" value="no">No
          </div>
          <div class="form-group col-md-12">
            <label>Question 2?</label>
            <input type="radio" name="Question2" [(ngModel)]="Question2" value="yes">Yes
            <input type="radio" name="Question2" [(ngModel)]="Question2" value="no">No
          </div>
</div>  


<div *ngIf="Question1 === 'yes' && Question2 === 'yes' else both">
  both questions is selected as yes
</div>

<ng-template #both>
  <ng-container *ngIf="Question1 === 'yes' || Question2 === 'yes' else oneAsNo">
      one of the questions is selected as yes
  </ng-container>
</ng-template>

<ng-template #oneAsNo>
<ng-container *ngIf="Question1 === 'no' || Question2 === 'no' else none">
      one of the questions is selected as no
  </ng-container>
</ng-template>

<ng-template #none>
    none of the questions
</ng-template>

demo 🌟🌟

Upvotes: 3

Related Questions