angle 2 xóa tất cả các mục khỏi định dạng


86

Tôi có một mảng biểu mẫu bên trong một trình tạo biểu mẫu và tôi đang tự động thay đổi biểu mẫu, tức là khi nhấp vào tải dữ liệu từ ứng dụng 1, v.v.

Vấn đề tôi đang gặp phải là tất cả dữ liệu tải vào nhưng dữ liệu trong biểu mẫu vẫn ở lại và chỉ nối các mục cũ với mới.

Làm cách nào để xóa formarray đó để chỉ có các mục mới.

Tôi đã thử cái này

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

nhưng nó không hoạt động.

Có ý kiến ​​gì không? cảm ơn

trong nginit

ngOnInit(): void {
this.route.params.subscribe(params => { alert(params['id']);
            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 }); 
                      }

                }
         
        );

       
        
        

       
    }

ngonitit không được gọi khi nhấp chuột


Câu trả lời:


146

Tôi đã có cùng một vấn đề. Có hai cách để giải quyết vấn đề này.

Bảo tồn đăng ký

Bạn có thể xóa từng phần tử FormArray theo cách thủ công bằng cách gọi removeAt(i)hàm trong một vòng lặp.

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

Ưu điểm của phương pháp này là bất kỳ đăng ký nào trên bạn formArray, chẳng hạn như đăng ký đã đăng ký formArray.valueChanges, sẽ không bị mất.

Xem tài liệu FormArray để biết thêm thông tin.


Phương pháp rõ ràng hơn (nhưng phá vỡ các tham chiếu đăng ký)

Bạn có thể thay thế toàn bộ FormArray bằng một FormArray mới.

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

Cách tiếp cận này gây ra sự cố nếu bạn đã đăng ký với phiên bản formArray.valueChangescó thể quan sát được! Nếu bạn thay thế FromArray bằng một mảng mới, bạn sẽ mất tham chiếu đến có thể quan sát được mà bạn đã đăng ký.


67
Tính đến góc 8+ cách ưa thích của loại bỏ tất cả các thành phần từ một FormArray đang sử dụngformArray.clear();
Renan

2
Ngoài ra, yourFormArray.setValue ([])); và yourFormGroup.setControl ('yourFormArray', []);
Oscar

1
bye bye xác nhận với cách tiếp cận này
Andre Elrico

@Renan Tôi đang sử dụng formControl
Emir Herrera

30

Hoặc bạn có thể chỉ cần xóa các điều khiển

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

Thêm một cái gì đó array

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

Xóa mảng

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

Khi bạn có nhiều lựa chọn được chọn và xóa, đôi khi nó không cập nhật chế độ xem. Một cách giải quyết là thêm

arr.removeAt(0)

CẬP NHẬT

Một giải pháp thanh lịch hơn để sử dụng mảng biểu mẫu là sử dụng getter ở đầu lớp của bạn và sau đó bạn có thể truy cập nó.

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

Và để sử dụng nó trong một mẫu

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

Cài lại:

inFormArray.reset();

Đẩy:

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

Xóa giá trị tại chỉ mục: 1

inFormArray.removeAt(1);

CẬP NHẬT 2:

Nhận một phần đối tượng, nhận tất cả lỗi dưới dạng JSON và nhiều tính năng khác, sử dụng NaoFormsModule


6
"Arr.controls = [];" đề cập đến là thực sự tuyệt vời!
dotNetkow

@Pian, Chỉ const arr = <FormArray> this.myForm.controls.arr; arr.controls = []; đang làm việc để xóa mảng biểu mẫu. TQ
chandoo

inFormArray.at(1).remove(); cho tôi một [ts] Property 'remove' does not exist on type 'AbstractControl'.lỗi chuyển tiếp.
zgue 14/09/18

@ Pian0_M4n trong mẫu của bạn, let c of inFormArraynên là let c of inFormArray.controls?
wal

22

Kể từ Angular 8+, bạn có thể sử dụng clear()để xóa tất cả các điều khiển trong FormArray:

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

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

Đối với các phiên bản trước, cách được khuyến nghị là:

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

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


1
Cảm ơn bạn đã đề cập đến Angular 8+ ở đây.
Patrick Hillert,

10

Góc 8

chỉ cần sử dụng clear()phương thức trên formArrays:

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

8

Angular v4.4 nếu bạn cần lưu cùng một tham chiếu đến phiên bản của FormArray, hãy thử điều này:

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

Cách tốt để duy trì đăng ký trong khi bật các phần tử ra khỏi mảng.
red_dorian

@mtpultz vui lòng lưu ý thay đổi ( stackoverflow.com/posts/41856927/revisions ) của câu trả lời được chấp nhận. Trong thời gian khi tôi rời khỏi câu trả lời này được chấp nhận câu trả lời khác với hiện tại.
Alex Dzeiko

8

Cảnh báo!

Tài liệu về Angular v6.1.7 FormArray cho biết:

Để thay đổi các điều khiển trong mảng, hãy sử dụng các phương thức push, insert hoặc removeAt trong chính FormArray. Các phương pháp này đảm bảo các điều khiển được theo dõi đúng trong hệ thống phân cấp của biểu mẫu. Không sửa đổi mảng AbstractControls được sử dụng để khởi tạo FormArray trực tiếp, vì điều đó dẫn đến hành vi lạ và không mong muốn như phát hiện thay đổi bị hỏng.

Hãy ghi nhớ điều này nếu bạn đang sử dụng splicehàm trực tiếp trên controlsmảng như một trong những câu trả lời được đề xuất.

Sử dụng removeAtchức năng.

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

6

Bạn có thể dễ dàng xác định getter cho mảng của mình và xóa nó như sau:

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

Thx Nó hoạt động ......
nos nart

5

Cập nhật: Angular 8 cuối cùng đã có phương thức để xóa Array FormArray.clear ()


4

Kể từ Angular 8, bạn có thể sử dụng this.formArray.clear()để xóa tất cả các giá trị trong mảng biểu mẫu. Đó là một giải pháp thay thế đơn giản và hiệu quả hơn để loại bỏ tất cả các phần tử một


4

Sử dụng FormArray.clear () để xóa tất cả các phần tử của một mảng trong FormArray


3

Cung cấp cấu trúc dữ liệu cho những gì bạn sẽ thay thế thông tin trong mảng bằng các kết quả phù hợp với những gì đã có mà bạn có thể sử dụng patchValue

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

patchValue (value: any [], {onlySelf, releaseEvent}?: {onlySelf ?: boolean, releaseEvent ?: boolean}): void Vá giá trị của FormArray. Nó chấp nhận một mảng phù hợp với cấu trúc của điều khiển và sẽ cố gắng hết sức để khớp các giá trị với các điều khiển chính xác trong nhóm.

Nó chấp nhận cả tập siêu và tập con của mảng mà không gây ra lỗi.

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

Ngoài ra, bạn có thể sử dụng reset

reset (value ?: any, {onlySelf, releaseEvent} ?: {onlySelf ?: boolean, releaseEvent ?: boolean}): void Đặt lại FormArray. Điều này có nghĩa là theo mặc định:

Mảng và tất cả các phần tử con được đánh dấu là nguyên sơ Mảng và tất cả các phần tử con được đánh dấu là nguyên bản Giá trị của tất cả các con số con sẽ là bản đồ rỗng hoặc null Bạn cũng có thể đặt lại về trạng thái dạng cụ thể bằng cách chuyển vào một mảng các trạng thái phù hợp với cấu trúc của điều khiển . Trạng thái có thể là một giá trị độc lập hoặc một đối tượng trạng thái biểu mẫu có cả giá trị và trạng thái bị vô hiệu hóa.

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

HOẶC LÀ

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

Đây là một bản demo Plunker được phân nhánh từ một số công việc trước đó của tôi về việc demo cách sử dụng rất đơn giản của mỗi cái.


chắc chắn điều này có nghĩa là bạn phải có cùng một số lượng chính xác các mục trong mảng?
Simon_Weaver

2

Tôi chưa bao giờ thử sử dụng formArray, tôi luôn làm việc với FormGroup và bạn có thể xóa tất cả các điều khiển bằng cách sử dụng:

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

là formGroup một thể hiện của FormGroup.


1

Tôi đã rất muộn nhưng tôi đã tìm thấy một số cách khác mà bạn không cần phải có vòng lặp. bạn có thể đặt lại mảng bằng cách đặt điều khiển mảng thành trống.

Đoạn mã dưới đây sẽ đặt lại mảng của bạn.

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


0

Vòng lặp While sẽ mất nhiều thời gian để xóa tất cả các mục nếu mảng có 100 mục. Bạn có thể làm trống cả các điều khiển và thuộc tính giá trị của FormArray như bên dưới.

clearFormArray = (formArray: FormArray) => {formArray.controls = []; formArray.setValue ([]); }


0

Để giữ cho mã sạch, tôi đã tạo phương thức mở rộng sau cho bất kỳ ai sử dụng Angular 7 trở xuống. Điều này cũng có thể được sử dụng để mở rộng bất kỳ chức năng nào khác của Biểu mẫu phản ứng.

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

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.