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>

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

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

Δημοσιεύθηκε 14/02/2020 στις 00:01
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
2

για την αντιδραστική δυναμική μορφή πρώτο πράγμα που πρέπει να δημιουργήσει τη βάση 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 🚀

Απαντήθηκε 17/02/2020 στις 01:21
πηγή χρήστη

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