Prime κουτάκι eng με αντιδραστική μορφή με συστοιχία

Question

Prime κουτάκι eng με αντιδραστική μορφή με συστοιχία

ψήφοι

0

Προσπαθώ να προσθέσω σειρά μου του αντικειμένου για να χαρτογραφήσει το πλαίσιο ελέγχου προνομιακή eng και θα ήθελα να πάρει τις τιμές για επιλεγμένα πλαίσια ελέγχου.

Έχω δοκιμάσει FormControlName αλλά αυτό ρίχνει απροσδιόριστο μετά την υποβολή.

είναι κάτω από το τραχύ κώδικα

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>

Πώς μπορώ να πάρω την αναφορά του ελέγχου μου και εκτιμά το ίδιο για αναπτυσσόμενο και πλαίσια ελέγχου.

Πώς να πάρει τις τιμές για μορφές δυναμικών;

javascript html angular radio-button primeng

Δημοσιεύθηκε 13/02/2020 στις 22:01
πηγή χρήστη atit patel

Σε άλλες γλώσσες...

1 απαντήσεις

Muhammad Albarmawi · Answer 1 · 2020-02-16 23:21

για την αντιδραστική δυναμική μορφή πρώτο πράγμα που πρέπει να δημιουργήσει τη βάση formGroup των στοιχείων ελέγχου φόρμας

μέθοδος getFormGroup θα επιστρέψει ένα αντικείμενο formGroup από βρόχο πάνω από τα δεδομένα και να δημιουργήσει μια μορφή ελέγχων με βασικό όνομα του textαξίας.

getFormGroup() {

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

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

    },{});

    return this.formBuilder.group(formControls)
  }

αφού δημιουργήσει τη φόρμα τώρα μπορούμε να καταστήσει τους ελέγχους μορφή του προτύπου

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