কৌণিকের একটি ফর্মআরে থেকে সমস্ত আইটেম সরান


87

আমার একটি ফর্মবিল্ডারের ভিতরে একটি ফর্ম অ্যারে রয়েছে এবং আমি গতিশীলভাবে ফর্মগুলি পরিবর্তন করছি, অর্থাৎ অ্যাপ্লিকেশন 1 ইত্যাদি থেকে ক্লিক লোড ডেটাতে on

আমি যে সমস্যাটি করছি তা হ'ল সমস্ত ডেটা লোড হয় তবে ফর্মআরে ডাটা থাকা থাকে এবং কেবল পুরানো আইটেমগুলিকে নতুন দিয়ে যুক্ত করে।

আমি কীভাবে সাফ করব যে ফর্মআরে কেবলমাত্র নতুন আইটেম রয়েছে।

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

const control2 = <FormArray>this.registerForm.controls['other_Partners'];
control2.setValue([]);

কিন্তু এটি কাজ করে না।

কোন ধারনা?

ngOnInit(): void {
  this.route.params.subscribe(params => {
    if (params['id']) {
      this.id = Number.parseInt(params['id']);
    } else { this.id = null;}
  });
  if (this.id != null && this.id != NaN) {
    alert(this.id);
    this.editApplication();
    this.getApplication(this.id);
  } else {
    this.newApplication();
  }
}

onSelect(Editedapplication: Application) {
  this.router.navigate(['/apply', Editedapplication.id]);
}

editApplication() {
  this.registerForm = this.formBuilder.group({
    id: null,
    type_of_proposal: ['', Validators.required],
    title: ['', [Validators.required, Validators.minLength(5)]],
    lead_teaching_fellow: ['', [Validators.required, Validators.minLength(5)]],
    description: ['', [Validators.required, Validators.minLength(5)]],
    status: '',
    userID: JSON.parse(localStorage.getItem('currentUser')).username,
    contactEmail: JSON.parse(localStorage.getItem('currentUser')).email,
    forename: JSON.parse(localStorage.getItem('currentUser')).firstname,
    surname: JSON.parse(localStorage.getItem('currentUser')).surname,
    line_manager_discussion: true,
    document_url: '',
    keywords: ['', [Validators.required, Validators.minLength(5)]],
    financial_Details: this.formBuilder.group({
      id: null,
      buying_expertise_description: ['', [Validators.required, Validators.minLength(2)]],
      buying_expertise_cost: ['', [Validators.required]],
      buying_out_teaching_fellow_cost: ['', [Validators.required]],
      buying_out_teaching_fellow_desc: ['', [Validators.required, Validators.minLength(2)]],
      travel_desc: ['', [Validators.required, Validators.minLength(2)]],
      travel_cost: ['', [Validators.required]],
      conference_details_desc: ['', [Validators.required, Validators.minLength(2)]],
      conference_details_cost: ['', [Validators.required]],
    }),

    partners: this.formBuilder.array([
        //this.initEditPartner(),
        //this.initEditPartner()
        // this.initMultiplePartners(1)
      ]
    ),
    other_Partners: this.formBuilder.array([
      //this.initEditOther_Partners(),
    ])
  });
}

getApplication(id) {
  this.applicationService.getAppById(id, JSON.parse(localStorage.getItem('currentUser')).username)
    .subscribe(Response => {
      if (Response.json() == false) {
        this.router.navigateByUrl('/');
      } else {
        this.application = Response.json();
        for (var i = 0; i < this.application.partners.length;i++) {
          this.addPartner();
        }
        for (var i = 0; i < this.application.other_Partners.length; i++) {
          this.addOther_Partner();
        }

        this.getDisabledStatus(Response.json().status);
        (<FormGroup>this.registerForm) .setValue(Response.json(), { onlySelf: true });
      }
    });
}

ngOnInit ক্লিক করা হবে না


একটি সম্পর্কিত সমস্যা এখানে কৌণিক রেপো
ই সুন্দিন

উত্তর:


148

আমারও একই সমস্যা ছিল এই সমস্যাটি সমাধান করার দুটি উপায় রয়েছে।

সাবস্ক্রিপশন সংরক্ষণ করুন

ফাংশনটিকে removeAt(i)একটি লুপে কল করে আপনি প্রতিটি ফর্মআরে উপাদানটি ম্যানুয়ালি সাফ করতে পারেন ।

clearFormArray = (formArray: FormArray) => {
  while (formArray.length !== 0) {
    formArray.removeAt(0)
  }
}

এই পদ্ধতির সুবিধাটি হ'ল আপনার যে কোনও সাবস্ক্রিপশন formArrayযেমন নিবন্ধিত রয়েছে তা হারাবে formArray.valueChangesনা।

দেখুন FormArray ডকুমেন্টেশন দেখুন।


ক্লিনার পদ্ধতি (তবে সাবস্ক্রিপশন উল্লেখগুলি ভঙ্গ করে)

আপনি পুরো ফর্মআরেটিকে নতুন দিয়ে প্রতিস্থাপন করতে পারেন।

clearFormArray = (formArray: FormArray) => {
  formArray = this.formBuilder.array([]);
}

আপনি যদি formArray.valueChangesপর্যবেক্ষণযোগ্যতে সাবস্ক্রাইব হন তবে এই পদ্ধতির কারণে কোনও সমস্যার সৃষ্টি হয় ! আপনি যদি ফয়ারআরিকে নতুন অ্যারে দিয়ে প্রতিস্থাপন করেন তবে আপনি সাবস্ক্রাইব করেছেন এমন পর্যবেক্ষণযোগ্য রেফারেন্সটি হারাবেন।


73
কৌনিক 8+ হিসাবে একটি ফর্মআরাই থেকে সমস্ত উপাদান অপসারণের পছন্দের উপায়টি ব্যবহার করছেformArray.clear();
রেনান

4
এছাড়াও, আপনার ফোর্মআরে.সেটওয়ালু ([])); এবং আপনারফর্মগ্রুপ.সেট কন্ট্রোল ('আপনারফর্মআরে', []);
অস্কার

4
এই পদ্ধতির সাথে বিদায় বৈধতা
আন্ড্রে এলরিকো

@ রেনান আমি ফর্মকন্ট্রোল ব্যবহার করছি
আমির হেরেরা

31

অথবা আপনি কেবল নিয়ন্ত্রণগুলি সাফ করতে পারেন

this.myForm= {
     name: new FormControl(""),
     desc: new FormControl(""),
     arr: new FormArray([])
}

কিছু যোগ করুন array

const arr = <FormArray>this.myForm.controls.arr;
arr.push(new FormControl("X"));

অ্যারে সাফ করুন

const arr = <FormArray>this.myForm.controls.arr;
arr.controls = [];

যখন আপনার একাধিক পছন্দ নির্বাচন করা এবং পরিষ্কার হয়ে যায়, কখনও কখনও এটি ভিউটি আপডেট করে না। একটি workaround যোগ করা হয়

arr.removeAt(0)

হালনাগাদ

ফর্ম অ্যারেগুলি ব্যবহার করার জন্য আরও মার্জিত সমাধান আপনার ক্লাসের শীর্ষে একটি গিটার ব্যবহার করছে এবং তারপরে আপনি এটি অ্যাক্সেস করতে পারবেন।

get inFormArray(): FormArray {
    this.myForm.get('inFormArray') as FormArray;
}

এবং এটি একটি টেমপ্লেটে ব্যবহার করতে

<div *ngFor="let c of inFormArray; let i = index;" [formGroup]="i">
other tags...
</div>

রিসেট:

inFormArray.reset();

ধাক্কা:

inFormArray.push(new FormGroup({}));

সূচকের মানটি সরান: 1

inFormArray.removeAt(1);

আপডেট 2:

আংশিক বস্তু পান, জেএসওএন এবং অন্যান্য অনেকগুলি বৈশিষ্ট্য হিসাবে সমস্ত ত্রুটি পান, নওফর্মস মডেল ব্যবহার করুন


6
"Arr.controls = [];" উল্লেখ সত্যিই দুর্দান্ত!
ডটনেটকাও

@ পিয়ান, কেবল কনট আর্ট = <ফর্মআরে> এটি.মিএফর্ম.কন্ট্রোলস.আর; arr.controls = []; ফর্ম অ্যারে সাফ করার জন্য কাজ করছে। টি
কিউ

inFormArray.at(1).remove(); আমাকে একটি [ts] Property 'remove' does not exist on type 'AbstractControl'.ট্রান্সিলার ত্রুটি দেয় ।
zgue

আপনার টেমপ্লেটে @ পিয়ান0_ এম 4 এন, let c of inFormArrayহওয়া উচিত let c of inFormArray.controls?
ওয়াল

23

clear()কৌনিক 8+ হিসাবে আপনি ফর্মআরেতে সমস্ত নিয়ন্ত্রণ সরাতে ব্যবহার করতে পারেন:

const arr = new FormArray([
   new FormControl(),
   new FormControl()
]);
console.log(arr.length);  // 2

arr.clear();
console.log(arr.length);  // 0

পূর্ববর্তী সংস্করণগুলির জন্য প্রস্তাবিত উপায় হ'ল:

while (arr.length) {
   arr.removeAt(0);
}

https://angular.io/api/forms/FormArray#clear


4
এখানে কৌনিক 8+ উল্লেখ করার জন্য ধন্যবাদ।
প্যাট্রিক হিলার্ট

11

কৌণিক 8

কেবলমাত্র clear()ফর্মআরেগুলিতে পদ্ধতি ব্যবহার করুন:

(this.invoiceForm.controls['other_Partners'] as FormArray).clear();

8

কৌণিক v4.4 আপনি যদি ফর্মআরয়ের উদাহরণে একই রেফারেন্সটি সংরক্ষণ করতে চান তবে এটি চেষ্টা করুন:

purgeForm(form: FormArray) {
  while (0 !== form.length) {
    form.removeAt(0);
  }
}

অ্যারে থেকে উপাদান পপ করার সময় সাবস্ক্রিপশন সংরক্ষণের ভাল উপায়।
red_dorian

@mtpultz দয়া পরিবর্তণের (নোট stackoverflow.com/posts/41856927/revisions গৃহীত উত্তর)। যখন আমি এই উত্তরটি রেখেছিলাম তখন গৃহীত উত্তরগুলি বর্তমান থেকে আলাদা ছিল।
অ্যালেক্স ডাজেইকো 16'19

8

সতর্কতা!

কৌণিক v6.1.7 ফর্মআরির ডকুমেন্টেশন বলেছেন:

অ্যারেতে নিয়ন্ত্রণগুলি পরিবর্তন করতে, নিজেই ফর্মআরেতে পুশ, সন্নিবেশ করান বা অপসারণ পদ্ধতি ব্যবহার করুন। এই পদ্ধতিগুলি নিয়ন্ত্রণগুলি ফর্মের শ্রেণিবিন্যাসে যথাযথভাবে অনুসরণ করা নিশ্চিত করে। ফর্মআরিকে সরাসরি ইনস্ট্যান্ট করতে ব্যবহৃত অ্যাবস্ট্রাক্ট্রন্টগুলির অ্যারেটি সংশোধন করবেন না, ফলস্বরূপ পরিবর্তিত সনাক্তকরণের মতো অদ্ভুত এবং অপ্রত্যাশিত আচরণের ফলে।

যদি আপনি প্রস্তাবিত উত্তরের একটি হিসাবে spliceসরাসরি controlsঅ্যারেতে ফাংশনটি ব্যবহার করছেন তবে এটি মনে রাখবেন।

removeAtফাংশনটি ব্যবহার করুন ।

  while (formArray.length !== 0) {
    formArray.removeAt(0)
  }

6

আপনি সহজেই আপনার অ্যারের জন্য একজন গিটারের সংজ্ঞা দিতে পারেন এবং নীচে এটি সাফ করতে পারেন:

  formGroup: FormGroup    
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.fb.group({
      sliders: this.fb.array([])
    })
  }
  get sliderForms() {
    return this.formGroup.get('sliders') as FormArray
  }

  clearAll() {
    this.formGroup.reset()
    this.sliderForms.clear()
  }


5

ফর্মআররে অ্যারের সমস্ত উপাদান মুছে ফেলার জন্য ফর্মআর.ক্রিয়ার () ব্যবহার করুন


4

কৌণিক 8 যেহেতু this.formArray.clear()আপনি ফর্ম অ্যারেতে সমস্ত মান সাফ করতে ব্যবহার করতে পারেন । একে একে সব উপাদান অপসারণ করার জন্য এটি একটি সহজ এবং আরও কার্যকর বিকল্প


3

আপনি যেভাবে ইতিমধ্যে সেখানে ব্যবহার করতে পারেন তার সাথে মিলের সাথে অ্যারের তথ্য পরিবর্তন করে আপনি কী করবেন তার জন্য ডেটা স্ট্রাকচার সরবরাহ করেছেন Prov patchValue

https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html#!#reset-anchor

প্যাচভ্যালু (মান: যে কোনও [], {কেবলমাত্র সেলফ, এমিটইভেন্ট} ?: {কেবলমাত্র ?: বুলিয়ান, এমিটইভেন্ট ?: বুলিয়ান}): অকার্যকর ফর্মআরারের মানকে প্যাচ করে। এটি এমন একটি অ্যারে গ্রহণ করে যা নিয়ন্ত্রণের কাঠামোর সাথে মেলে এবং গ্রুপের সঠিক নিয়ন্ত্রণের সাথে মানগুলি মেলে দেওয়ার জন্য সর্বোত্তম চেষ্টা করবে।

এটি ত্রুটি না ছুঁড়েই অ্যারের সুপার সেট এবং উপ-সেট উভয়ই গ্রহণ করে।

const arr = new FormArray([
   new FormControl(),
   new FormControl()
]);
console.log(arr.value);   // [null, null]
arr.patchValue(['Nancy']);
console.log(arr.value);   // ['Nancy', null]

বিকল্পভাবে আপনি ব্যবহার করতে পারেন reset

পুনরায় সেট করুন (মান ?: যে কোনও, {কেবলমাত্র, কেবলমাত্র, এমিটইভেন্ট} ?: {কেবলমাত্র ?: বুলিয়ান, এমিটইভেন্ট ?: বুলিয়ান}): বাতিল ফর্মআর্রে পুনরায় সেট করুন ts এর অর্থ ডিফল্টরূপে:

অ্যারে এবং সমস্ত বংশধরদের মূল চিহ্ন চিহ্নিত করা হয়েছে অ্যারে এবং সমস্ত বংশধরকে অচ্ছুত চিহ্নিত করা হয়েছে সমস্ত বংশধরের মান নাল বা নাল মানচিত্র হবে আপনি নিয়ন্ত্রণের কাঠামোর সাথে মেলে এমন একটি রাজ্যের অ্যারে পেরিয়ে একটি নির্দিষ্ট ফর্মের রাজ্যে পুনরায় সেট করতে পারেন You । রাজ্য একটি মান এবং অক্ষম স্থিতি উভয় সহ স্ট্যান্ডলোন মান বা একটি ফর্ম রাষ্ট্রের অবজেক্ট হতে পারে।

this.arr.reset(['name', 'last name']);
console.log(this.arr.value);  // ['name', 'last name']

বা

this.arr.reset([   {value: 'name', disabled: true},   'last' ]);
console.log(this.arr.value);  // ['name', 'last name']
console.log(this.arr.get(0).status);  // 'DISABLED'

এখানে প্রতিটি কাজের খুব সাধারণ ব্যবহার ডেমোং করার পূর্বের কিছু কাজ থেকে একটি কাঁটাযুক্ত প্লাঙ্কার ডেমো রয়েছে।


অবশ্যই এর অর্থ আপনার অ্যারেতে ঠিক একই সংখ্যক আইটেম থাকতে হবে?
সাইমন_উইভার

2

আমি ফর্মআরাই ব্যবহার করার চেষ্টা করিনি, আমি সর্বদা ফর্মগ্রুপের সাথে কাজ করেছি এবং আপনি ব্যবহার করে সমস্ত নিয়ন্ত্রণ মুছে ফেলতে পারেন:

Object.keys(this.formGroup.controls).forEach(key => {
          this.formGroup.removeControl(key);
        });

ফর্মগ্রুপ ফর্মগ্রুপের একটি উদাহরণ।


1

কোডটি পরিষ্কার রাখার জন্য আমি কৌণিক 7 এবং নীচের ব্যবহার করে প্রত্যেকের জন্য নিম্নলিখিত এক্সটেনশন পদ্ধতি তৈরি করেছি। এটি প্রতিক্রিয়াশীল ফর্মগুলির অন্য কোনও কার্যকারিতা বাড়ানোর জন্যও ব্যবহার করা যেতে পারে।

import { FormArray } from '@angular/forms';

declare module '@angular/forms/src/model' {
  interface FormArray {
    clearArray: () => FormArray;
  }
}

FormArray.prototype.clearArray = function () {
  const _self = this as FormArray;
  _self.controls = [];
  _self.setValue([]);
  _self.updateValueAndValidity();
  return _self;
}


1

আমি খুব দেরি করে ফেলেছি তবে আমি অন্য কোনও উপায় পেয়েছি যেখানে আপনার লুপের দরকার নেই। আপনি অ্যারে নিয়ন্ত্রণটি ফাঁকাতে সেট করে অ্যারেটিকে পুনরায় সেট করতে পারেন।

নীচের কোডটি আপনার অ্যারেটিকে পুনরায় সেট করবে।

this.form.setControl('name', this.fb.array([]))


0

অ্যারেতে 100 টি আইটেম থাকলে লুপটিতে সমস্ত আইটেম মুছতে দীর্ঘ সময় লাগবে। আপনি নীচের মতো ফর্মআরয়ের নিয়ন্ত্রণ এবং মান উভয় সম্পত্তি খালি করতে পারেন।

ক্লিয়ারফর্মআরে = (ফর্মআরাই: ফর্মআরাই) => {ফর্মআরাই কন্ট্রোল = []; formArray.setValue ([]); }


0

আপনি যদি কৌনিক 7 বা পূর্ববর্তী সংস্করণ ব্যবহার করছেন এবং আপনি পরিষ্কার () পদ্ধতিতে অ্যাক্সেস না পেয়ে থাকেন তবে কোনও লুপ না করেই তা অর্জন করার উপায় রয়েছে:

yourFormGroup.controls.youFormArrayName = new FormArray([]);
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.