কৌণিক 2: প্রতিক্রিয়াশীল ফর্ম নিয়ন্ত্রণের উপর Iterate


উত্তর:


199

এটি Object.keysপরিচালনা করতে পারে তা জানতে পেরে ..

    Object.keys(this.form.controls).forEach(key => {
      this.form.get(key).markAsDirty();
    });

কৌণিক 8+ এর জন্য, নিম্নলিখিতগুলি (মাইকেলেঞ্জেলো উত্তরের উপর ভিত্তি করে) ব্যবহার করুন:

    Object.keys(this.form.controls).forEach(key => {
      this.form.controls[key].markAsDirty();
    });

4
আমি যখন এই জমাটি অন-সাবমিটে ব্যবহার করি তখন আমার ত্রুটি ঘটে যায় Cannot invoke an expression whose type lacks a call signature. Type 'AbstractControl' has no compatible call signatures.কেন কেউ জানে কেন?
মাইদি

4
অবজেক্ট.কিজ (এটি.রেজিস্টারফর্ম। কন্ট্রোলস) .এফের জন্য (কী => {this.registerForm.controls [কী] .মার্কএএসডিটি ();});
ফোড করুন

আমি যখন অবজেক্ট.কি বা এমনকি "ইন ইন" চেষ্টা করি তখন কিছুই পাই না। তবুও, যদি আমি কনসোল.লগ করি (form.controls) আমি অবজেক্টের সাথে থাকা সমস্ত ফর্ম নিয়ন্ত্রণগুলি দেখতে পাচ্ছি। আমি হতবাক
জ্যাক শেকসওয়ার্থ

কৌণিক 5 ব্যবহার করে, মার্কএডডার্ট () / মার্কএসট্যাচড () কোনও উপ-ফর্মগ্রুপগুলিতে পুনরাবৃত্তি করে না। আমি উপরের কোডটি একটি পুনরাবৃত্ত ফাংশন হিসাবে ছড়িয়ে দিয়েছি এবং এটি কোনও উপ-ফর্মগ্রুপগুলিতে কল করি। ডাব্লু / বর্তমান কৌণিক উপাদান ইউআই প্রকল্পটি আরও ভাল কাজ করে যদি কোনও ব্যবহারকারী কোনও প্রয়োজনীয় উপাদানকে কখনই স্পর্শ না করে, ব্যবহারকারী যখন সেই বিন্দুতে চিহ্নিত করার জন্য ফর্মটি জমা দেওয়ার চেষ্টা করে তখন আমি এটিকে কল করি।
রবার্ট

4
আমার পোস্টটি পড়ার জন্য এবং আপনার নিজের উত্তরটি আপডেট করার জন্য ধন্যবাদ x সরকারী দস্তাবেজগুলিও পুরানো হয়ে গেছে তাই প্রতিটি লাইন মুদ্রণ করে আমাকে এটি বের করতে হয়েছিল ...
মাইকেলেঞ্জেলো

56

এটি মূল্যবান কিসের জন্য, অবজেক্ট.কিজ (...) যাদু ব্যবহার না করে এটি করার আরও একটি উপায় রয়েছে :

for (const field in this.form.controls) { // 'field' is a string

  const control = this.form.get(field); // 'control' is a FormControl  

}

লুপের সূচকটি কীভাবে পাবেন?
এসভিকে

4
যারা টিএসলিন্ট ব্যবহার করেন তাদের ক্ষেত্রে কোডটি কাজ করে, তবে টিএসলিন্টের অভিযোগ "জন্য (... ইন ...) বিবৃতি অবশ্যই যদি একটি বিবৃতি (ফরিন) দিয়ে ফিল্টার করা উচিত"।
ইয়েনেনিফার

4
tslint ইশারা করা হয়, জন্য ... বিবৃতিতে এর জাভাস্ক্রিপ্ট ডকুমেন্টেশন থেকে উদ্ধৃতি stackoverflow.com/questions/40770425/...
Egle Kreivyte

41

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

public markControlsDirty(group: FormGroup | FormArray): void {
    Object.keys(group.controls).forEach((key: string) => {
        const abstractControl = group.controls[key];

        if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
            this.markControlsDirty(abstractControl);
        } else {
            abstractControl.markAsDirty();
        }
    });
}

instanceofটাইপস্ক্রিপ্ট দ্বারা প্রতিস্থাপনের পরে সর্বদা কাজ করবে ?
উল্লেখযোগ্য

@ দ্য-উল্লেখযোগ্য কোনও টাইপ instanceof-স্ক্রিপ্ট-নির্দিষ্ট কীওয়ার্ড নয় ( ডেভেলপার.মোজিলা.আর.ইন -ইউএস / ডকস / ওয়েবে / জাভা স্ক্রিপ্ট / রেফারেন্স /… ) উভয়ই classডেটা টাইপ নয়।
কেইনন ডিগস

8

@ মারকোস জবাবটি ব্যবহার করে আমি একটি ফাংশন তৈরি করেছি যা ফর্মগ্রুপকে প্যারামিটার হিসাবে পাস করা বলা যেতে পারে এবং এটি প্রতিটি ফর্মগ্রুপ বাচ্চাদের নিয়ন্ত্রণ করে নোংরা করার জন্য, এটি কোডের আশেপাশে আরও জায়গা থেকে এটি ব্যবহারের যোগ্য করে তোলে যাতে এটি কোনও পরিষেবাতে রেখে দেয় example

public touchAllFormFields(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach((key) => {
        formGroup.get(key).markAsDirty();
    });
}

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


পারফেক্ট! ক্লিয়ারভালিডেটর, স্পর্শ ইত্যাদির সাথে ডাব্লু / একই ধরণের ক্রিয়াকলাপের সাথে পরিষেবাতে যুক্ত হয়েছে, নেস্টেড কন্ট্রোলগুলির জন্য পুনরাবৃত্ত চেক যুক্ত করতে পারে, তবে এটি আপাতত কাজ করে। ধন্যবাদ!
এমসি 01

6

দেখে মনে হচ্ছে যে get ফাংশনটি আপনার কৌনিক 8 এ আপনার ফর্মের নির্দিষ্ট মানগুলি পুনরুদ্ধার করার জন্য আর কাজ করছে না, সুতরাং @ লিভিউ ইলিয়ার উত্তরের ভিত্তিতে আমি এটি সমাধান করেছি।

for (const field in this.myForm.controls) { // 'field' is a string
  console.log(this.myForm.controls[field].value);
}

তুমি কি নিশ্চিত? অ্যাবস্ট্রাক্ট কন্ট্রোলের জন্য এপিআই ডকটির ইতিমধ্যে পাওয়ার পদ্ধতি রয়েছে ( কৌণিক.ইও / অ্যাপি / সফটওয়্যার / অ্যাবস্ট্র্যাক্ট কন্ট্রোল #get )। আমি এখনও মাইগ্রেশন করি নি। এখন আমি ভয় পেয়েছি (⊙_ ◎)
অ্যালান

@ অ্যালানগ্রোস হ্যাঁ, আমি এটিও আবার দেখেছিলাম যখন আমি এটি পুনর্লিখন করছি কিন্তু কনসোলে সমস্ত লাইন মুদ্রণ করার সময়ও আমি বস্তুটিতে কোনও পদ্ধতি খুঁজে পাইনি। আমি মনে করি ডকুমেন্টেশন পিছনে আছে। সৌভাগ্য হিজরত!
মাইচেলঞ্জেলো

আমি মনে করি না তারা এগুলি সরিয়ে নিয়েছে, আমার জন্য কৌনিক
অ্যাবস্ট্র্যাক্ট কন্ট্রোল#


4

এটিই আমার পক্ষে কাজ করছে

private markFormGroupTouched(formGroup: FormGroup) {
  Object.keys(formGroup.controls).forEach((key) => {
    const control = formGroup.controls[key];
    control.markAsDirty();
    if ((control instanceof FormGroup)) {
      this.markFormGroupTouched(control);
    }
  });
}

1

আমি এটি তৈরি করতে এই ফাংশনটি তৈরি করি * নাম 'অর্ডার' সহ আমার একটি নিয়ন্ত্রণ আছে এবং তাকে সূচকটি পাস করি।

{"conditionGroups": [
   {
     "order": null,
     "conditions": []
   }
  ]
}


updateFormData() {
    const control = <FormArray>this.form.controls['conditionGroups'];  
    control.value.map((x,index)=>{
    x.order = index; 
 })
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.