각도에서 양식 배열에서 모든 항목 제거

각도에서 양식 배열에서 모든 항목 제거

FormBuilder 내부에 폼 배열이 있으며 동적으로 폼을 변경하고 있습니다. 예를 들어, 애플리케이션 1에서 데이터를 로드할 때 등입니다.

문제는 모든 데이터가 로드되지만 FormArray의 데이터는 그대로 유지되고 이전 항목을 새 항목과 연결한다는 것입니다.

FormArray에 새 항목만 포함되도록 하려면 어떻게 해야 합니까?

먹어봤어요.

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가 클릭 시 호출되지 않습니다.

저도 같은 문제가 있었어요.이 문제를 해결하는 두 가지 방법이 있습니다.

구독 유지

"FormArray " 를 호출합니다.removeAt(i)순환 작용을 하다

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

이 접근 방식의 장점은 당신의 모든 구독이formArray▁with에 등록된 것과 것.formArray.valueChanges잃어버리지 않을 것입니다.

자세한 내용은 FormArray 설명서를 참조하십시오.

---

클리너 방법(단, 구독 참조는 중단)

전체 FormArray를 새 FormArray로 바꿀 수 있습니다.

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

이 접근 방식은 가입한 경우 문제를 일으킵니다.formArray.valueChanges를 배열로 항목에 됩니다.FromArray를 새 배열로 바꾸면 구독 중인 관찰 가능 항목에 대한 참조가 손실됩니다.

8+으로 Angular 8+를 사용할 수 있습니다.clear()FormArray의 모든 컨트롤을 제거하는 방법

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

또는 단순히 컨트롤을 지울 수 있습니다.

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 = [];

선택한 항목이 여러 개 있고 선택을 취소하면 보기가 업데이트되지 않는 경우가 있습니다.해결 방법은 다음과 같습니다.

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:

부분 객체 가져오기, 모든 오류를 JSON 및 기타 많은 기능으로 가져오기, NaoForms 모듈 사용

앵귤러 8

순한사용을 사용합니다.clear()ForArrays:

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

간단히

formArray.clear()

충분할 것 같습니다

경고!

Angular v6.1.7 FormArray 설명서는 다음과 같이 설명합니다.

배열의 컨트롤을 변경하려면 FormArray 자체에서 push, insert 또는 removeAt 메서드를 사용합니다.이러한 방법을 사용하면 양식의 계층 구조에서 컨트롤을 올바르게 추적할 수 있습니다.FormArray를 직접 인스턴스화하는 데 사용되는 AbstractControls 배열을 수정하지 마십시오. 그러면 중단된 변경 탐지와 같은 이상하고 예기치 않은 동작이 발생합니다.

사용 중인 경우 이 점에 유의하십시오.splice에서 직접 기능합니다.controls배열은 제안된 답변 중 하나입니다.

사용removeAt기능.

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

FormArray 인스턴스에 동일한 참조를 저장해야 하는 경우 Angular v4.4에서 다음을 시도합니다.

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

(this.questionForm.controls['answers'] as FormArray).clear();

어레이에 대한 게터를 쉽게 정의하고 다음과 같이 지울 수 있습니다.

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

FormArray.clear()를 사용하여 FormArray에서 배열의 모든 요소를 제거합니다.

Angular 8부터 사용할 수 있습니다.this.formArray.clear()폼 배열의 모든 값을 지웁니다.모든 요소를 하나씩 제거하는 것이 더 간단하고 효율적인 대안입니다.

업데이트: Angular 8에서 Array FormArray.clear()를 지우는 메서드를 얻었습니다.

배열의 정보를 사용할 수 있는 이미 있는 정보와 일치하는 것으로 바꿀 데이터 구조를 제공patchValue

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

patchValue(값: any[], {onlySelf,emitEvent})?:{자기만?부울, emitEvent?boolean) : void FormArray의 값을 패치합니다.컨트롤의 구조와 일치하는 배열을 사용할 수 있으며 그룹의 올바른 컨트롤에 값을 일치시키기 위해 최선을 다합니다.

오류를 발생시키지 않고 배열의 수퍼 세트와 하위 세트를 모두 허용합니다.

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

대신 사용할 수 있습니다.reset

reset(값?any, {OnlySelf,emitEvent}?:{자기만?부울, emitEvent?boolean) : void FormArray를 재설정합니다.이는 기본적으로 다음을 의미합니다.

배열 및 모든 하위 항목이 기본으로 표시됨 배열 및 모든 하위 항목이 그대로 표시됨 모든 하위 항목의 값이 null 또는 null 맵이 됨 컨트롤 구조와 일치하는 상태 배열을 전달하여 특정 양식 상태로 재설정할 수도 있습니다.상태는 독립 실행형 값이거나 값과 사용 안 함 상태를 모두 가진 폼 상태 개체일 수 있습니다.

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

OR

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

이것은 제 초기 작업에서 나온 포크 플런커 데모입니다. 각각의 매우 간단한 사용법을 보여줍니다.

FormArray를 사용해 본 적이 없으며 항상 FormGroup과 함께 작업했으며 다음을 사용하여 모든 컨트롤을 제거할 수 있습니다.

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

formFormGroup의 인스턴스를 그룹화합니다.

코드를 깨끗하게 유지하기 위해 Angular 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;
}

많이 늦었지만 루프가 필요 없는 다른 방법을 찾았습니다.배열 제어를 빈칸으로 설정하여 배열을 재설정할 수 있습니다.

아래 코드는 배열을 재설정합니다.

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

배열에 100개의 항목이 있는 경우 루프가 모든 항목을 삭제하는 데 시간이 오래 걸립니다.아래와 같이 FormArray의 컨트롤과 값 속성을 모두 비울 수 있습니다.

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

Angular 7 또는 이전 버전을 사용하고 있는데 clear() 메서드에 액세스할 수 없는 경우 루프를 수행하지 않고 이를 수행할 수 있습니다.

yourFormGroup.controls.youFormArrayName = new FormArray([]);

언급URL : https://stackoverflow.com/questions/41852183/remove-all-items-from-a-formarray-in-angular