ngIf une valeur de composant de forme réactive angulaire

Question

J'ai un ensemble de boutons radio. Si un utilisateur sélectionne la valeur "oui", je veux afficher une case supplémentaire sur le formulaire.

https://stackblitz.com/edit/angular-4bgahw?file=src/app/personal/personal.component.ts

Composant HTML

<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">

    <div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
            <span class="checkmark"></span>
        </label>
    </div>

    <!-- <div class="col-md-8" *ngIf="selectedButton.control.item === 'yes'"> --> //my attempt to target above input value
  <div class="col-md-8" >
        <input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
    </div>

Quelqu'un peut-il faire fonctionner ce système et me montrer ce que je fais de mal ?

Answer 1

Vous devez accéder à la valeur du contrôle de formulaire :

*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">

STACKBLITZ

Answer 2

Tout ce que vous écrivez dans le modèle est résolu par rapport à la classe correspondante (ou par rapport aux variables du modèle), de sorte que vous devez vous référer au contrôle JavaScript comme ceci :

*ngIf="form.controls['selectedButton'].value === 'yes'"

Answer 3

Appelez une fonction pour activer le drapeau en fonction de la valeur du bouton radio, (ngModelChange)="onRadiochange($event)"

Essayez comme ça :

Démonstration de travail

.html

<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />

<div class="col-md-8" *ngIf="showTitle">
        <input type="text" formControlName="title"   class="form-control" placeholder="Title">
</div>

.ts

  onRadiochange(e) {
    if(e.section == 'yes'){
      this.showTitle = true
    } else {
      this.showTitle = false
    }
  }

On peut aussi le faire en une seule ligne comme ceci :

<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />

Answer 4

Chaque fois que oui est sélectionnée, vous devez afficher la zone de texte du titre.
Dans ce cas, modifiez votre code comme suit.

En composant.personnel.ts ajoutez cette variable.

yesSelected: boolean = true;

Également dans ngOnInit(),

this.form.valueChanges.subscribe(val=>{
      if(val.radioButtonsGroup.selectedButton.section === "yes") 
         this.yesSelected = true;
      else 
         this.yesSelected = false;
});

En composant.personnel.html réécrivez votre condition si comme ceci.

<div class="col-md-8" *ngIf="yesSelected">
      <input type="text" formControlName="title" placeholder="Title">
</div>

Ces modifications permettront d'afficher la zone de texte du titre uniquement lorsque la case à cocher "oui" est sélectionnée.