ফর্মগ্রুপ বনাম ফর্মআরে কখন ব্যবহার করবেন?

Question 1

একটি ফর্মগ্রুপ প্রতিটি বাচ্চার ফর্মকন্ট্রোলের মানকে একটি অবজেক্টে একত্রিত করে, প্রতিটি নিয়ন্ত্রণের নামটি কী হিসাবে।

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew')
});

ফর্মআরে :

একটি ফর্মআরে প্রতিটি বাচ্চার ফর্মকন্ট্রোলের মানকে একটি অ্যারেতে একত্রিত করে।

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew')
]);

কখন অন্যটির উপরে ব্যবহার করা উচিত?

Question 2

ফর্মআরাই ফর্মগ্রুপের একটি বৈকল্পিক। মূল পার্থক্যটি হ'ল এর ডেটা অ্যারে হিসাবে সিরিয়ালাইজড হয় (ফর্মগ্রুপের ক্ষেত্রে অবজেক্ট হিসাবে সিরিয়ালাইজড হওয়ার বিপরীতে)। এটি বিশেষত কার্যকর হতে পারে যখন আপনি জানেন না যে গতিশীল ফর্মগুলির মতো গ্রুপের মধ্যে কতগুলি নিয়ন্ত্রণ উপস্থিত থাকবে।

আমাকে একটি দ্রুত উদাহরণ দিয়ে ব্যাখ্যা করার চেষ্টা করুন। বলুন, আপনার কাছে এমন একটি ফর্ম রয়েছে যেখানে আপনি পিজ্জার জন্য কোনও গ্রাহকের আদেশ ক্যাপচার করেন। এবং তাদের কোনও বিশেষ অনুরোধ যুক্ত করতে এবং মুছে ফেলার জন্য আপনি একটি বোতাম রাখুন। উপাদানটির এইচটিএমএল অংশটি এখানে:

<section>
  <p>Any special requests?</p>
  <ul formArrayName="specialRequests">
    <li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
      <input type="text" formControlName="{{i}}">
      <button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
    </li>
  </ul>
  <button type="button" (click)="onAddSpecialRequest()">
    Add a Request
  </button>
</section>

স্নিপেট প্রসারিত করুন

এবং এখানে বিশেষ অনুরোধগুলি সংজ্ঞায়িত এবং পরিচালনা করার জন্য উপাদান উপাদানটি রয়েছে:

constructor () {
  this.orderForm = new FormGroup({
    firstName: new FormControl('Nancy', Validators.minLength(2)),
    lastName: new FormControl('Drew'),
    specialRequests: new FormArray([
      new FormControl(null)
    ])
  });
}

onSubmitForm () {
  console.log(this.orderForm.value);
}

onAddSpecialRequest () {
  this.orderForm.controls
  .specialRequests.push(new FormControl(null));
}

onRemoveSpecialRequest (index) {
  this.orderForm.controls['specialRequests'].removeAt(index);
}

স্নিপেট প্রসারিত করুন

ফর্মগ্রাই এই সূত্রে ফর্মগ্রুপের চেয়ে আরও নমনীয়তার প্রস্তাব দেয় যে ফর্মগ্রুপের "অ্যাডকন্ট্রোল", "রিমুভাল কন্ট্রোল", "সেটভ্যালু" ইত্যাদি ব্যবহারের চেয়ে "পুশ", "সন্নিবেশ" এবং "অপসারণআউট" ব্যবহার করে ফর্মকন্টলগুলি পরিচালনা করা আরও সহজ Form সঠিকভাবে ফর্ম এর শ্রেণিবিন্যাস ট্র্যাক।

আশাকরি এটা সাহায্য করবে.

Question 3

একটি প্রতিক্রিয়াশীল ফর্ম তৈরি করতে, পিতামাতার FormGroupএকটি আবশ্যক। এটিতে FormGroupআরও formControlsবাচ্চা formGroupsবা থাকতে পারেformArray

FormArrayআরও অ্যারে formControlsবা formGroupনিজেই থাকতে পারে ।

আমাদের কখন ফর্মআরে ব্যবহার করা উচিত?

দয়া করে এই সুন্দর পোস্টটি পড়ুন যা এর ব্যবহারের ব্যাখ্যা দেয়formArray

সেই ব্লগে আকর্ষণীয় উদাহরণটি ভ্রমণের বিষয়ে formGroup

ভ্রমণের গঠন formGroupব্যবহার formControlএবং formArrayভালো কিছু দেখাবে:

this.tripForm = this.fb.group({
    name: [name, Validators.required],
     cities: new FormArray(
       [0] ---> new FormGroup({
           name: new FormControl('', Validators.required),
               places: new FormArray(
                  [0]--> new FormGroup({
                      name: new FormControl('', Validators.required),
                         }),
                      [1]--> new FormGroup({
                         name: new FormControl('', Validators.required),
                      })
                  )
              }), 
       [1] ---> new FormGroup({
           name: new FormControl('', Validators.required),
           places: new FormArray(
               [0]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               }),
               [1]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               })
               )
      }))
})

এই ডেমো দিয়ে খেলতে ভুলবেন না , এবং ভ্রমণের জন্য citiesএবং অ্যারের ব্যবহার লক্ষ্য করুন places।

Question 4

থেকে: অ্যান্টন মোসিয়েভ বই "টাইপসক্রিপ্ট সহ কৌনিক উন্নয়ন, দ্বিতীয় সংস্করণ।" :

যখন আপনাকে কোনও ফর্মের সাথে প্রোগ্রামগতভাবে নিয়ন্ত্রণগুলি যুক্ত করতে (বা অপসারণ) করতে হবে , ফর্মআরে ব্যবহার করুন । এটি ফর্মগ্রুপের মতো তবে এর দৈর্ঘ্য ভেরিয়েবল রয়েছে । যেখানে FormGroup একটি প্রতিনিধিত্ব করে সমগ্র ফর্ম বা একটি ফর্ম মাঠে একটি নির্দিষ্ট উপসেট , FormArray সাধারণত একটি প্রতিনিধিত্ব করে ফর্ম নিয়ন্ত্রণ যে হত্তয়া বা সঙ্কুচিত করতে পারেন সংগ্রহ ।

উদাহরণস্বরূপ, আপনি ব্যবহারকারীদের ইমেইলগুলির একটি স্বেচ্ছাসেবী প্রবেশের অনুমতি দেওয়ার জন্য ফর্মআরে ব্যবহার করতে পারেন ।

Question 5

কৌনিক ডকুমেন্টেশন থেকে আপনি এটি দেখতে পারেন

নামবিহীন কয়েকটি নিয়ন্ত্রণ পরিচালনা করার জন্য ফর্মগ্রাই হ'ল ফর্মগ্রুপের বিকল্প। ফর্ম গোষ্ঠীর উদাহরণগুলির মতো, আপনি গতিশীলভাবে ফর্ম অ্যারের উদাহরণগুলি থেকে নিয়ন্ত্রণগুলি সন্নিবেশ করতে এবং সরাতে পারেন এবং ফর্ম অ্যারের উদাহরণ মান এবং বৈধতা স্থিতিটি তার শিশু নিয়ন্ত্রণ থেকে গণনা করা হয়। যাইহোক, আপনাকে নাম অনুসারে প্রতিটি নিয়ন্ত্রণের জন্য একটি কী সংজ্ঞায়িত করতে হবে না, তাই যদি আপনি আগাম শিশু মানগুলির সংখ্যা না জানেন তবে এটি দুর্দান্ত বিকল্প।

আমাকে তাদের উদাহরণটি দেখান এবং আমি কীভাবে এটি বুঝতে পারি তা বোঝানোর চেষ্টা করুন। আপনি এখানে উত্স দেখতে পারেন

একটি ফর্ম জাদুকরী নিম্নলিখিত ক্ষেত্র আছে কল্পনা করুন

  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });

এখানে আমরা আছে firstName, lastName, addressএবং aliasesসকল একসঙ্গে ক্ষেত্র ফর্ম দল তাই আমরা সবকিছু মোড়ানো group। একই সাথে addressএকটি সাবগ্রুপের মতো তাই আমরা এটিকে অন্য একটিতে গুটিয়ে রাখি group(আরও ভাল বোঝার জন্য আপনি টেমপ্লেটটি দেখতে পারেন)! এখানে প্রতিটি ফর্ম নিয়ন্ত্রণ হিচকে keyবাদ দেয় aliasesএবং এর অর্থ হ'ল আপনি এর মতো formBuilderপদ্ধতিগুলি ব্যবহার করে সাধারণ অ্যারে যেমন পছন্দ করতে চান তত পরিমাণে এটিতে চাপ দিতে পারেন push।

এইভাবে আমি এটি বুঝতে পারি, আশা করি এটি কাউকে সহায়তা করবে।