prime ger Ankreuzfeld mit reaktiver Form mit Array

stimmen
0

Ich versuche, meine Array von Objekt hinzufügen, um die prime eng Checkbox zur Karte und möchten die Werte für ausgewählte Kontrollkästchen erhalten.

Ich habe versucht, FormControlName aber es ist das Werfen nicht definiert nach der Einreichung.

unten ist der grobe Code

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>

Wie kann ich die Referenz meiner Kontrolle bekommen und Werte gleich für Drop-Down-und Kontrollkästchen.

Wie die Werte für dynamische Formulare zu bekommen?

Veröffentlicht am 13/02/2020 um 22:01
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
2

für reaktive dynamische Form erstes haben wir die formGroup Basis der Form von Steuerdaten zu erzeugen,

getFormGroup Methode wird eine formGroup Aufgabe durch eine Schleife über die Daten zurück , und ein Formular - Steuerelemente mit Namen Basis des schaffen textWert.

getFormGroup() {

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

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

    },{});

    return this.formBuilder.group(formControls)
  }

nachdem wir die Form erzeugen jetzt können wir den Formular-Steuerelemente auf der Vorlage machen

<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>

Demo 🚀

Beantwortet am 16/02/2020 um 23:21
quelle vom benutzer

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