web-dev-qa-db-fra.com

Angular ngIf formGroup

J'ai un formulaire sur Angular qui permet d'afficher une entrée en fonction de la valeur sélectionnée dans une liste déroulante.

Voici un exemple de mon code:

(Si deux sont sélectionnés, une entrée apparaît)

https://stackblitz.com/edit/angular-fqkfyx

Si je laisse le [formGroup] = "usForm" l'affichage d'entrée ne fonctionne pas. D'un autre côté, si je supprime [formGroup] = "usForm" du formulaire de balise, mon code fonctionne comme je le souhaite. Le problème est donc lié à [formGroup] = "usForm"

Mon html:

 <div class="offset-md-2">
  <form [formGroup]="usForm">
    <div class="div-champs">
      <p id="champs">Type
        <span id="required">*</span>
      </p>
      <div class="select-style ">
          <select [(ngModel)]="selectedOption" name="type">
              <option style="display:none">
              <option [value]="o.name" *ngFor="let o of options">
                {{o.name}}
              </option>
          </select>
      </div>
    </div>
    <p id="champs" *ngIf="selectedOption == 'two'">Appears
      <input type="appears" class="form-control" name="appears">
    </p>
  </form>
</div>

Mon component.ts:

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

import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-create-us',
  templateUrl: './create-us.component.html',
  styleUrls: ['./create-us.component.css']
})
export class CreateUsComponent implements OnInit {

  public usForm: FormGroup;
  public selectedOption: string;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.usForm = this.fb.group({
      'type': [null, ],
      'appears': [null, ],
    });
  }

  options = [
    { name: 'first', value: 1 },
    { name: 'two', value: 2 }
  ];
}

J'ai simplifié mon problème autant qu'en réalité c'est sous une grande forme avec une dizaine d'entrées

J'ai besoin de votre aide, merci d'avance

Cordialement, Valentin

htmlangularformstypescriptangular-ng-if
4
Valentin

Vous devez utiliser formControlName au lieu de [(ngModel)].

Et puis en comparaison, vous devriez comparer à usForm.value.type au lieu de selectedValue.

Essayez ceci:

<div class="offset-md-2">
  <form [formGroup]="usForm">
    <div class="div-champs">
      <p id="champs">Type
        <span id="required">*</span>
      </p>
      <div class="select-style ">
          <select formControlName="type" name="type">
              <option style="display:none">
              <option [value]="o.name" *ngFor="let o of options">
                {{o.name}}
              </option>
          </select>
      </div>
    </div>
    <p id="champs" *ngIf="usForm.value.type == 'two'">Appears
      <input type="appears" class="form-control" name="appears">
    </p>
  </form>
</div>

Voici un Sample StackBlitz pour votre référence.

11
SiddAjmera

Votre modèle est chargé avant la création du groupe de formulaires. Ajoutez ngIf au gémissement pendant la création du groupe de formulaires:

<div class="offset-md-2" *ngIf="usForm">
    <form [formGroup]="usForm">
0
alexey28