метод в кнопке с углом для отображения панели HTML

Question

Привет, сообщество! Я родной в угловой! Я хочу реализовать метод на моей кнопке с целью отображения 2-х панельных сценариев и сценариев с помощью переключателя (compaign или script)! Я на самом деле не знаю подходящий метод для начала! потому что две панели написаны на HTML, а метод должен быть написан с использованием машинописи! Я начал упоминать 2 условия в панелях *ngIf="option === 'compaign'", а второе условие *ngIf="option === 'script'" соответственно в панелях Compaign и script, как показано ниже !!

****** gotosearch.component.html *****

<form [(formGroup)]="choosewindowForm" (ngSubmit)="onSubmit()"> <!-- difinition simple de FormGroup- 
->
<div class="panel panel-primary">
<div class="panel-heading">
 <h3 class="panel-title">Select an option to start the search </h3>
</div>
<div class="form-group">
      <!--Compaign button-->  
      <div class ="form-control">
      <label class="radio-inline"> <!-- radio inline to inline both buttons in the same line-->
          <input type="radio" value="Compaign" formControlName="option" name="option"
          > <!--mutually execlusive-->
      Compaign
      </label>

      </div>

      <!--  Script button-->
      <div class ="form-control">
      <label class="radio-inline">
          <input type="radio" value="Script" formControlName="option" name="option"
          > <!--To make the two buttons mutually execlusive we have to add (name="option") in both 
buttons -->
      Script 
      </label>
      </div>
  </div>

       <!-- OK button  -->
  <div class="panel-footer">
              <button class="btn btn-primary"type="submit"> ok </button>
            </div>
</div>
<!-- Intorduction to the two panels-->
<!-- 1st panel of Compaign-->
<form class="example-form" *ngIf="option === 'compaign'">
<!-- Compaign panel content goes here -->
<div class="panel-footer">
    <button class="btn btn-primary" type="submit" >Start !</button>
  </div>
</div>

</form>

<!-- 2nd panel for script-->
<form class="example-form" *ngIf="option === 'script'">
<!-- Script panel content goes here -->

<div class="panel-footer">
  <button class="btn btn-primary" type="submit" >Start !</button>
</div>
</div>
</form>
</form>

****** gotosearch.component.ts ***********

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

@Component ({

    selector : ' gotosearch-star',
    templateUrl: './gotosearch.component.html'

})

export class GotosearchComponent implements OnInit{

 choosewindowForm : FormGroup ;
 constructor () {}

 ngOnInit (){

    this.choosewindowForm = new FormGroup({ 
            option: new FormControl() 


    }) ;
 }
 onSubmit(){
         console.log('hihoo');

 }

}

Answer 1

Добавить новую переменную и установить ее значение на основе выбранной радиокнопки. После этого используйте эту новую переменную в разделе * ngIf.

<form [formGroup]="choosewindowForm" (ngSubmit)="onSubmit()">
  <div class="form-control">
    <label class="radio-inline">
    <!-- radio inline to inline both buttons in the same line-->
    <input type="radio" value="Compaign" formControlName="option" name="option">
    <!--mutually execlusive-->
    Compaign
   </label>
</div>
<!--  Script button-->
 <div class="form-control">
  <label class="radio-inline">
    <input type="radio" value="Script" formControlName="option" name="option">
    <!--To make the two buttons mutually execlusive we have to add (name="option") in 
    both buttons -->
    Script
  </label>
 </div>

 <div class="panel-footer">
  <button class="btn btn-primary" type="submit"> ok </button>
</div>
</form>
<!-- Intorduction to the two panels-->
 <!-- 1st panel of Compaign-->
<form class="example-form" *ngIf="displayFormName === 'Compaign'">
<!-- Compaign panel content goes here -->
  <div class="panel-footer">
   compaign Div
   <button class="btn btn-primary" type="submit">Start !</button>
   </div>
</form>

<!-- 2nd panel for script-->
<form class="example-form" *ngIf="displayFormName === 'Script'">
 <!-- Script panel content goes here -->
 <div class="panel-footer">
  Script Div
 <button class="btn btn-primary" type="submit">Start !</button>
 </div>

Компонент

export class GotosearchComponent implements OnInit{
displayFormName: string;
constructor () {}

choosewindowForm = this.fb.group({
  option: []
}); 

onSubmit(){
  this.displayFormName = this.choosewindowForm.controls.option.value;
}

}