Угловая обработка условно управляемой формы

Question

Я новичок в Angular, я использую шаблонно-управляемую форму.У меня есть два вопроса в форме переключателей (показанных ниже), Мой вариант использования таков: как только пользователь ответит на оба этих вопроса, основываясь на его / ее ответе, мне нужно показать другой набор вопросов.Итак, если ответ на любой из двух вопросов - «да», то мне нужно показать другой набор вопросов. Если ответ на оба вопроса - «нет», то мне не нужно показывать другой набор вопросов.Пожалуйста, помогите, как этого добиться.

Мои файлы template и component.ts показаны ниже.Я попытался использовать «* ngIf» с условием *ngIf="Question1 || Question2", но это не работает, потому что, как только на первый вопрос ответили «да», он отображает раздел с текстом «Показать остальные вопросы».Пожалуйста, смотрите мой пример кода ниже.Я хочу, чтобы, когда пользователь отвечал на оба вопроса, тогда отображался только div с текстом «Показать оставшиеся вопросы» или «Не показывать оставшиеся вопросы», основанный на ответе.

<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>

Нижемой частичный компонент.тс

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

Answer 1

this value="yes" установит выбранное значение в строку, если вы хотите установить значение true / false, попробуйте вот так

<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>

, затем вы можете использовать ngIf, чтобы показать другой раздел, подобный этому

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


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

Question1 || Question2 станет верным для любого из выбранных ответов: да, или вы можете показать, что остальные ответы оба - да, как это Question1 && Question2

демо ??

обновлено !! ⚡⚡

установить значение true / false будетограничить нашу проверку выбранных случаев

<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>

демо ??