prime eng checkbox s reaktivní formy s polem

hlasů
0

Snažím se přidat svou nabídku objektu mapování políčka prime eng a chtěli byste získat hodnoty pro vybrané rámečky.

Zkoušel jsem FormControlName ale je to házení nedefinovaný po odeslání.

Níže je hrubý kód

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>

Jak mohu získat odkaz na mou kontrolou a hodnoty stejné pro rozbalovací nabídky a zaškrtávací políčka.

Jak se dostat na hodnoty pro dynamické formuláře?

Položena 14/02/2020 v 00:01
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
2

jalového dynamickou formu první věc, kterou budeme muset vygenerovat formGroup základny kontrolního forma údajů

Způsob getFormGroup vrátí objekt formGroup smyčkou nad daty a vytvořit ovládací prvky formuláře s názvem základnou texthodnoty.

getFormGroup() {

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

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

    },{});

    return this.formBuilder.group(formControls)
  }

poté, co jsme vytvoření formuláře nyní můžeme vykreslit ovládací prvky formuláře v šabloně

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

Odpovězeno 17/02/2020 v 01:21
zdroj uživatelem

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