प्रपत्र समूह के लिए Angular2 सेट मान

Question

इसलिए मेरे पास एक इकाई बनाने के लिए एक जटिल रूप है और मैं इसे संपादन के लिए उपयोग करना चाहता हूं और साथ ही मैं नए कोणीय रूपों एपीआई का उपयोग कर रहा हूं। मैंने फॉर्म को ठीक उसी प्रकार संरचित किया है जैसा कि मैं डेटाबेस से प्राप्त डेटा को प्राप्त करता हूं, इसलिए मैं यहां प्राप्त डेटा को पूरे फॉर्म का मूल्य निर्धारित करना चाहता हूं जो मैं करना चाहता हूं उसके लिए एक उदाहरण है:

this.form = builder.group({
      b : [ "", Validators.required ],
      c : [ "", Validators.required ],
      d : [ "" ],
      e : [ [] ],
      f : [ "" ]
    });
this.form.value({b:"data",c:"data",d:"data",e:["data1","data2"],f:data});

पुनश्च: NgModel नए रूपों के साथ काम नहीं करता है एपीआई भी मुझे टेम्पलेट में एक तरह से डेटा बाइंडिंग का उपयोग करने में कोई आपत्ति नहीं है

<input formControlName="d" value="[data.d]" />

यह काम करता है लेकिन यह सरणियों के मामले में एक दर्द होगा

Comments

जहाँ तक मुझे पता है कि एक फॉर्म वैल्यू सेट करना वर्तमान में समर्थित नहीं है और अगले अपडेट (RC.5) के बाद समर्थित होगा। कृपया एक प्लंकर प्रदान करें।

— गुंटर ज़ोचबॉयर

@ GünterZöchbauer मेरे वर्तमान समाधान की जाँच करें

— Amgad Serry

Di आप देखते हैं: github.com/angular/angular/blob/2.0.0-rc.5/modules/%40angular/… लाइन 553 FormGroup.setValue ()?

— क्लेमेंट

Answer 1

सेट करने के लिए सभी FormGroup मूल्यों का उपयोग, setValue :

this.myFormGroup.setValue({
  formControlName1: myValue1, 
  formControlName2: myValue2
});

केवल कुछ मान सेट करने के लिए , पैचवैल्यू का उपयोग करें :

this.myFormGroup.patchValue({
  formControlName1: myValue1, 
  // formControlName2: myValue2 (can be omitted)
});

इस दूसरी तकनीक के साथ, सभी मूल्यों की आपूर्ति करने की आवश्यकता नहीं है और फ़ील्ड के जो मान निर्धारित नहीं किए गए हैं वे प्रभावित नहीं होंगे।

Comments

मैं पैचवैल्यू को नेस्टेड रूप में उपयोग कर रहा हूं और यह फॉर्म के सभी क्षेत्रों को अधिलेखित कर रहा है। (यहां तक ​​कि जो मैं निर्दिष्ट नहीं करता हूं) कोई भी विचार जो मैं गलत कर रहा हूं?

— एनरिको

@ यूरिको, उर कोड के बिना मैं यू की मदद नहीं कर सकता।

— मममोरियम

Answer 2

सेट मूल्य के लिए जब आपका नियंत्रण फ़ॉर्मग्रुप इस उदाहरण का उपयोग कर सकता है

this.clientForm.controls['location'].setValue({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude
    });

Answer 3

आप विशिष्ट नियंत्रण ऑब्जेक्ट को प्राप्त करने और setValue का उपयोग करने के लिए form.get का उपयोग कर सकते हैं

this.form.get(<formControlName>).setValue(<newValue>);

Answer 4

हां, आप संपादन / अद्यतन उद्देश्य के लिए मान सेट करने के लिए setValue का उपयोग कर सकते हैं।

this.personalform.setValue({
      name: items.name,
      address: {
        city: items.address.city,
        country: items.address.country
      }
    });

आप सेटवैल्यू का उपयोग करके ऐड / एडिट सुविधा के लिए प्रतिक्रियात्मक रूपों का उपयोग करने के तरीके को समझने के लिए http://musttoknow.com/use-angular-reactive-form-addinsert-update-data-use-setvalue-setpatch/ का उल्लेख कर सकते हैं । इसने मेरा समय बचाया

Answer 5

जैसा कि टिप्पणियों में बताया गया है, यह सुविधा उस समय समर्थित नहीं थी जब यह प्रश्न पूछा गया था। इस मुद्दे को कोणीय 2 आरसी 5 में हल किया गया है

Answer 6

मैंने एक अस्थायी समाधान लागू किया है जब तक कि कोणीय 2 समर्थन प्रपत्र अपडेट नहीं हो

 initFormGroup(form: FormGroup, data: any) {
        for(var key in form.controls) {
          console.log(key);
          if(form.controls[key] instanceof FormControl) {
            if(data[key]){
              let control = <FormControl>form.controls[key];
              this.initFormControl(control,data[key]);
            }
          } else if(form.controls[key] instanceof FormGroup) {
            if(data[key]){
              this.initFormGroup(<FormGroup>form.controls[key],data[key]);
            }
          } else if(form.controls[key] instanceof FormArray) {
            var control = <FormArray>form.controls[key];
            if(data[key])
            this.initFormArray(control, data[key]);
          }
        }
      }
      initFormArray(array: FormArray, data: Array<any>){
    if(data.length>0){
      var clone = array.controls[0];
      array.removeAt(0);
      for(var idx in data) {
        array.push(_.cloneDeep(clone));
        if(clone instanceof FormGroup)
          this.initFormGroup(<FormGroup>array.controls[idx], data[idx]);
        else if(clone instanceof FormControl)
          this.initFormControl(<FormControl>array.controls[idx], data[idx]);
        else if(clone instanceof FormArray)
          this.initFormArray(<FormArray>array.controls[idx], data[idx]);
      }
    }
  }


initFormControl(control: FormControl, value:any){
    control.updateValue(value);
  }

उपयोग:

this.initFormGroup(this.form, {b:"data",c:"data",d:"data",e:["data1","data2"],f:data});

नोट: फ़ॉर्म और डेटा में समान संरचना होनी चाहिए और मैंने डीपक्लोइंग jQuery के लिए लॉश का उपयोग किया है और अन्य कार्य भी कर सकते हैं

Answer 7

"NgModel नए रूपों एपीआई के साथ काम नहीं करता है"।

यह सच नहीं है। बस आपको इसे सही तरीके से उपयोग करने की आवश्यकता है। यदि आप प्रतिक्रियाशील रूपों का उपयोग कर रहे हैं, तो प्रतिक्रियाशील निर्देश के साथ कॉन्सर्ट में NgModel का उपयोग किया जाना चाहिए । स्रोत में उदाहरण देखें ।

/*
 * @Component({
 *      selector: "login-comp",
 *      directives: [REACTIVE_FORM_DIRECTIVES],
 *      template: `
 *        <form [formGroup]="myForm" (submit)='onLogIn()'>
 *          Login <input type='text' formControlName='login' [(ngModel)]="credentials.login">
 *          Password <input type='password' formControlName='password'
 *                          [(ngModel)]="credentials.password">
 *          <button type='submit'>Log in!</button>
 *        </form>
 *      `})
 * class LoginComp {
 *  credentials: {login:string, password:string};
 *  myForm = new FormGroup({
 *    login: new Control(this.credentials.login),
 *    password: new Control(this.credentials.password)
 *  });
 *
 *  onLogIn(): void {
 *    // this.credentials.login === "some login"
 *    // this.credentials.password === "some password"
 *  }
 * }
 */

हालांकि यह TODO टिप्पणियों से दिखता है , इसे संभवतः हटा दिया जाएगा और एक प्रतिक्रियाशील एपीआई के साथ बदल दिया जाएगा।

// TODO(kara):  Replace ngModel with reactive API
@Input('ngModel') model: any;

Comments

angular2 एपीआई डॉक्स NgModel चयनकर्ता से आ रही [ngModel]: नहीं ([formControlName]): नहीं ([formControl]) angular.io/docs/ts/latest/api/forms/index/... तो भले ही वह अब काम करता है यह हो जाएगा बाद में हटा दिया मुझे लगता है कि मैं एक मैनुअल मूल्य इंजेक्टर को लागू करेगा के रूप में यह एक अधिक स्थिर समाधान हो जाएगा

— Amgad सटाकर चलना

@AmgadSerry यह सुनिश्चित करने के लिए है कि यह उन घटकों (चयनकर्ता) के साथ हस्तक्षेप नहीं करता है। FormControlNameस्पष्ट रूप से एक के रूप में यह कहते हैं @Input()। मेरे द्वारा जुड़े स्रोत को देखें। यदि चयन करने वालों की उपेक्षा नहीं होती, तो ऊपर दिए गए उदाहरण के साथ, एक NgModel बनाया जाएगा, जिसे आप नहीं चाहते हैं।

— पॉल समसोथा

यह थोड़ा भ्रमित करने वाला है, लेकिन यह सिर्फ इतना है कि इसे कैसे लागू किया जाता है। दोनों के लिए FormControlDirective( [formControl]) और FormControlName( formControlName), यह कैसे काम करता है। यदि ngModelउनमें से एक के बिना उपयोग किया जाता है, तो यह माना जाता है कि आप घोषणात्मक रूपों का उपयोग कर रहे हैं, और एक NgModelबनाया गया है। यदि प्रतिक्रियाशील रूप निर्देशों में से किसी एक के साथngModel प्रयोग किया जाता है , तो वह प्रतिक्रियाशील रूप निर्देश मॉडल को संभालेगा, न किNgModel

— पॉल समसोथा

ओह, मैंने सोचा कि वे एक हैक के रूप में उन दो निर्देशों पर एनकोमॉडल को सक्षम करने के लिए केवल समय के लिए और वे इसे बाद में निकाल देंगे

— अमगद सेरी

मेरे वर्तमान समाधान की जाँच करें

— Amgad Serry