Отображать панель после выбора радиокнопки

Question

Я родной в Angular.Я создал панель, которая содержит две переключатели (Compaign и Script) и кнопку ok в нижнем колонтитуле панели.Я хотел бы отобразить панель compaign (1-й переключатель), нажимая кнопку выбора Compaign и ok для подтверждения.С другой стороны, я хотел бы отобразить панель Script, нажимая при этом на опции Script (2-й переключатель) и ok для подтверждения.Но у меня проблемы с моим кодом.

gotosearch.html

<form [(formGroup)]="choosewindowForm">
    <!-- 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" name="option" [(ngModel)]="option">
                    <!--mutually execlusive-->
                    Compaign
                </label>

            </div>

            <!--  Script button-->
            <div class="form-control">
                <label class="radio-inline">
                    <input type="radio" value="script" name="option" [(ngModel)]="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 tow panels-->

    <!-- 1st panel of Compaign-->
    <form class="example-form">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Search using Compaign parameters</h3>
            </div>

            <mat-form-field class="example-full-width">
                <textarea matInput placeholder="Request ID"></textarea>
            </mat-form-field>
            <div class="panel-footer">
                <button class="btn btn-primary" type="submit">Start !</button>
            </div>
        </div>
    </form>
    <!-- 2nd panel for script-->
    <form class="example-form">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Search using Script parameters</h3>
            </div>

            <mat-form-field class="example-full-width">
                <textarea matInput placeholder="Request ID"></textarea>
            </mat-form-field>

            <mat-form-field class="example-full-width">
                <textarea matInput placeholder="ICCID"></textarea>
            </mat-form-field>

            <mat-form-field class="example-full-width">
                <textarea matInput placeholder="Send DATE"></textarea>
            </mat-form-field>

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

gotosearch.ts

export class GotosearchComponent implements OnInit {
    choosewindowForm: FormGroup;

    constructor() { }

    ngOnInit() {
        this.choosewindowForm = new FormGroup({

        });
    }
}

Answer 1

Ваш formGroup здесь ничего не делает.Чтобы использовать реактивные формы, см. Примеры в документах .Здесь, поскольку вы использовали ngModel для переключателей, вы можете использовать его вместе с ngIf для условного отображения панелей Compaign или Script.

<!-- 1st panel of Compaign-->
<form class="example-form" *ngIf="option === 'compaign'">
    <!-- Compaign panel content goes here -->
</form>

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

где compaign и script - значения ваших переключателей соответственно.