सरणी के साथ प्रतिक्रियाशील फार्म के साथ प्रधानमंत्री 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>

मैं अपने नियंत्रण के संदर्भ कैसे प्राप्त और ड्रॉप-डाउन और चेक बॉक्स के लिए एक ही महत्व देता कर सकते हैं।

कैसे गतिशील रूपों के लिए मूल्यों को प्राप्त करने के लिए?

13/02/2020 को 22: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>

डेमो 🚀

16/02/2020 को 23:21
का स्रोत उपयोगकर्ता

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