ফর্মগ্রুপের জন্য কৌণিক 2 সেট মান

Question 1

সুতরাং সত্তা তৈরির জন্য আমার একটি জটিল ফর্ম রয়েছে এবং আমি এটি সম্পাদনার জন্যও ব্যবহার করতে চাই পাশাপাশি আমি নতুন কৌণিক ফর্ম এপিআই ব্যবহার করছি। আমি ডাটাবেস থেকে প্রাপ্ত তথ্য হিসাবে ঠিক ফর্মটি কাঠামোবদ্ধ করেছি তাই আমি পুনরুদ্ধারকৃত ডেটাতে পুরো ফর্মের মান সেট করতে চাই আমি কী করতে চাই তার একটি উদাহরণ:

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});

পিএস: এনজিএমডেল এপিআই-র নতুন ফর্মগুলির সাথে কাজ করে না আমিও হিসাবে টেমপ্লেটে একমুখী ডেটা বাইন্ডিং বাঁধার ব্যবহার করতে আপত্তি করি না

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

এটি কাজ করে তবে অ্যারেগুলির ক্ষেত্রে এটি একটি ব্যথা হবে

Question 2

সমস্ত ফর্মগ্রুপ মান ব্যবহার করতে, সেটভ্যালু সেট করুন :

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

কেবলমাত্র কয়েকটি মান সেট করতে প্যাচভ্যালু ব্যবহার করুন :

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

এই দ্বিতীয় কৌশলটি দিয়ে, সমস্ত মান সরবরাহ করার দরকার নেই এবং মানগুলি সেট করা হয়নি এমন ক্ষেত্রগুলি প্রভাবিত হবে না।

Question 3

সেট মানটির জন্য যখন আপনার নিয়ন্ত্রণ ফর্মগ্রুপ হয় এই উদাহরণটি ব্যবহার করতে পারে

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

Question 4

হ্যাঁ আপনি সম্পাদনা / আপডেটের উদ্দেশ্যে মান সেট করতে সেটভ্যালু ব্যবহার করতে পারেন।

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-using-setvalue-setpatch/ উল্লেখ করতে পারেন। এটা আমার সময় সাশ্রয়

Question 5

আপনি নির্দিষ্ট নিয়ন্ত্রণ অবজেক্টটি পেতে form.get ব্যবহার করতে পারেন এবং সেটভ্যালু ব্যবহার করতে পারেন

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

Question 6

মন্তব্যে নির্দেশিত হিসাবে, এই প্রশ্নটি জিজ্ঞাসা করার সময় এই বৈশিষ্ট্যটি সমর্থন করা হয়নি। এই সমস্যাটি কৌনিক 2 আরসি 5 এ সমাধান করা হয়েছে

Question 7

আমি কৌণিক 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 এর জন্য লড্যাশ ব্যবহার করেছি এবং অন্যান্য লিবগুলিও এটি করতে পারে

Question 8

"এনজিএমডেল এপিআই-র নতুন ফর্মগুলির সাথে কাজ করে না"।

এটা সত্যি না. আপনার কেবল এটি সঠিকভাবে ব্যবহার করা দরকার। যদি আপনি প্রতিক্রিয়াশীল ফর্মগুলি ব্যবহার করেন তবে এনজিএমডেলটি প্রতিক্রিয়াশীল নির্দেশনার সাথে কনসার্টে ব্যবহার করা উচিত । উত্স উদাহরণ দেখুন ।

/*
 * @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(kara):  Replace ngModel with reactive API
@Input('ngModel') model: any;