Если выбран переключатель, показывать элемент в Angular 5

Question

Я пытаюсь получить переключатель для отображения элемента, когда переключатель выбран.Я пробовал несколько разных решений.[(ngModel)] выдает ошибки.

Кажется, я не могу получить значение радио для прохождения через ngIf, и, как бы я ни старался, у меня тоже не получается получить "истинное" утверждение для прохождения через ngIf.

Вот мои .ts для формы:

import {Component, Input} from '@angular/core';
import {FormGroup} from "@angular/forms";
import { MdRadioChange } from '@angular/material';
@Component({
  selector: 'activation-role',
  template: `
    <div class="form-group" [formGroup]="group" >
      <mat-radio-group formControlName="role" [attr.data-optional]="canViewDiv">
        <mat-radio-button #{{role.id}} (change)="onRadioChange($event)" class="radio-button-vertical" *ngFor="let role of activation_roles" [value]="role.id">
          <div>{{role.label}}</div> 
          <mat-hint>{{role.additionalText}}</mat-hint>
        </mat-radio-button>
      </mat-radio-group>
    </div>`

})

export class ActivationRoleComponent {

  @Input() group: FormGroup;

  canViewDiv: boolean = true;

  onRadioChange(event: MdRadioChange) {

    if (event.value === 'option1') {
      this.canViewDiv = true;

      console.log(event.value);
      console.log(this.canViewDiv);
    } else {
      this.canViewDiv = false;

      console.log(event.value);
      console.log(this.canViewDiv);
    }
  }


  private activation_roles = [{
    id: 'option1',
    value: 'Option one',
    label: 'Option one',
    status: true,
    additionalText: 'This is additional text'
  },{
    id: 'option2',
    value: 'Option two',
    label: 'Option two',
    status: false,
    additionalText: 'This is additional text two'
  },{
    id: 'option3',
    value: 'Option three',
    label: 'Option three',
    status: false,
    additionalText: 'This is additional text three'
  }];

}export class ActivationRoleComponent {

  @Input() group: FormGroup;

  canViewDiv: boolean = true;

  onRadioChange(event: MdRadioChange) {

    if (event.value === 'option1') {
      this.canViewDiv = true;

      console.log(event.value);
      console.log(this.canViewDiv);
    } else {
      this.canViewDiv = false;

      console.log(event.value);
      console.log(this.canViewDiv);
    }
  }


  private activation_roles = [{
    id: 'option1',
    value: 'Option one',
    label: 'Option one',
    status: true,
    additionalText: 'This is additional text'
  },{
    id: 'option2',
    value: 'Option two',
    label: 'Option two',
    status: false,
    additionalText: 'This is additional text two'
  },{
    id: 'option3',
    value: 'Option three',
    label: 'Option three',
    status: false,
    additionalText: 'This is additional text three'
  }];

}

А вот моя форма html:

<mat-accordion>
        <!-- ROLE ACCORDION -->
        <mat-expansion-panel class="activation-form__role" expanded="true" #roleAccordion>
          <mat-expansion-panel-header #roleAccordionHeader>Your Role</mat-expansion-panel-header>

          <activation-role [group]="roleGroup"></activation-role>

          <mat-action-row>
            <button mat-button color="primary" class="activation-form__role__next-btn" (click)="expandStep(1)" [disabled]="roleGroup.invalid" >Next</button>
          </mat-action-row>
        </mat-expansion-panel>

        <mat-expansion-panel *ngIf="roleGroup?.data-optional === 'true'" class="rmb-form__corporate-details" #strataManagerDetailsAccordion [disabled]="detailsGroup.invalid">
        </mat-expansion-panel>
<mat-accordion>

Любая помощь приветствуется.

Answer 1

Есть некоторые проблемы с вашим подходом.Во-первых, вы пытаетесь использовать логическое значение, которое находится внутри дочернего компонента, т.е. активационной роли, в вашем родительском компоненте, т.е. компоненте формы.Вам необходимо передать значение из дочернего компонента в родительский после его изменения, а затем показать и скрыть div в родительском компоненте на основе этого значения.

Кроме того, в роли активации вам не нужно использовать группу формродительского компонента путем передачи в качестве ввода, потому что форма внутри этого компонента имеет только переключатель.Вы можете достичь желаемого, не используя группу форм внутри компонента активации-маршрута и не используя ngModel.

Я создал для вас решение стекаблиц, в котором реализовал компонент роли активации, аналогичный вашему компоненту.Я не знал о компоненте формы, поэтому я создал свою собственную пользовательскую форму и использовал ее в роли активации и на основе переключателей в компоненте роли активации, панель mat-expnasion-скрыта или показана.Вот ссылка на решение: Показать скрыть div на основе радио .В этом решении я излучаю значение переключателя от дочернего компонента и использую его в родительском компоненте.Постарайтесь понять, что делается в решении, чтобы лучше понять ввод и вывод в угловых значениях.Для получения дополнительной информации о входном выходе см. Входной выход в угловом

Обновление для @Gaurang Sondagar Я изменил stackblitz в соответствии с вашими требованиями.Он содержит 2 компонента, form-component и expansion-panel.Панель расширения содержит панель и группу радио.

В form-component есть массив allRadioPanels, с помощью которого визуализируются панели.Каждый объект этого массива содержит связанный SelectedValue для переключателя каждой панели, связанный Comments значение для каждой панели и CommentsRequiredValue, чтобы указать, какой выбранный параметр означает, что для этой панели требуются комментарии.

Вкл.внизу есть кнопка отправки, которая отключается, если для любой панели CommentsRequiredValue, если равно SelectedValue и Comments, не заполнены.

Например, для Panel 2 CommentsRequiredValue - это Option 2 и SelectedValue изначально также установлен на Option 2.Первоначально отключенная кнопка отправки активируется, если вы измените значение радиостанции Panel 2 с опции 2 или введете в нее комментарии.

Будет работать одинаково для всех панелей.