Premier case eng, avec la forme réactive avec matrice

voix
0

Je suis en train d'ajouter mon tableau d'objet pour cartographier la prime case eng et voudrais obtenir les valeurs cases cochées.

Je l'ai essayé FormControlName mais il est lançage non défini après la soumission.

ci-dessous est le code rugueux

data = [
    { type: dropdown
      text: 'drop',
      num: 1.23,
      options: [
      {
       value=1,
       text= 'drop1
      },{
       value=2,
       text= 'drop2
      }
      ]
    },
    { type: checkbox
      text: 'check',
      num: 1.23,
      options: [
      {
       value=1,
       text= 'check1
      },{
       value=2,
       text= 'check2
      }
      ]
    },
    { type: radio
      text: 'radio',
      num: 1.23,
      options: [
      {
       value=1,
       text= 'radio1
      },{
       value=2,
       text= 'radio2
      }
      ]
    },
  ];
<form [formGroup]=group>
 
  <div *ngFor=let d of data>
  <div *ngSwitchCase = checkbox>
    <p-checkbox *ngFor=let check of options  [value]=check.value [formControlName]=check.text></p-checkbox>
    </div>
    <div *ngSwitchCase = dropdown>
  <p-dropdown *ngFor=let drop of options [value]=drop.value [formControlName]=d.text> {{drop.text}}
   </p-dropdown>
  </div>
   <div *ngSwitchCase = radio>
    <p-radioButton  *ngFor=let radio of options[value]=radio.value [formControlName]=d.text></p-radioButton >
  </div>
  </div>
 </form>

Comment puis-je obtenir la référence de mon contrôle et les valeurs de la même pour la liste déroulante et des cases à cocher.

Comment obtenir les valeurs des formes dynamiques?

Créé 14/02/2020 à 00:01
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
2

pour la forme dynamique réactive première chose que nous devons générer la base de formGroup des données de contrôle de formulaire

Procédé getFormGroup retourne un objet formGroup en boucle sur les données et créer un contrôle de forme avec la base du nom de la textvaleur.

getFormGroup() {

    const formControls = this.data.reduce( (controls , f:FormControl)=>{

      controls[f.text] = this.formBuilder.control(null);
      return controls;

    },{});

    return this.formBuilder.group(formControls)
  }

après que nous générons la forme maintenant, nous pouvons rendre les contrôles de formulaire sur le modèle

<form [formGroup]="form">

    <div *ngFor="let d of data">

        <ng-container [ngSwitch]="d.type">

            <label for="">{{d.text}}</label>
            <div *ngSwitchCase="'checkbox'">
                <p-checkbox *ngFor="let check of d.options" [label]="check.label" [value]="check.value"
                    [formControlName]="d.text"></p-checkbox>
            </div>

            <div *ngSwitchCase="'dropdown'">
                <p-dropdown [options]="d.options" [formControlName]="d.text">
                </p-dropdown>
            </div>

            <div *ngSwitchCase="'radio'">

                <p-radioButton *ngFor="let radio of d.options" [name]="d.text" [label]="radio.label"
                    [value]="radio.value" [formControlName]="d.text">
                </p-radioButton>

            </div>

        </ng-container>
    </div>
</form>

démo 🚀

Créé 17/02/2020 à 01:21
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more