Блог

Я пытаюсь динамически добавлять и удалять formgroup в formarray с помощью компонента counter. В цикле for есть 4 компонента счетчика, которые имеют категорию. Когда пользователь нажимает на кнопку добавить, счетчик увеличивается и добавляет formgroup в formarray. Здесь нет никаких проблем.

Но теперь я застрял с удалением нужной formgroup. Когда пользователь нажимает на кнопку удаления в formgroup или уменьшает счетчик, я хочу удалить нужную группу. Итак, при уменьшении мне нужно, чтобы последняя formgroup в этой категории была удалена, и при нажатии кнопки удаления я хочу, чтобы счетчик уменьшился на 1 и удалил formgroup.

Это то, что у меня есть до сих пор:

компонент формы

  profileForm: FormGroup;

ngOnInit() {
    this.profileForm = this.fb.group({
      Age: new FormControl(0),
      PartnerAge: new FormControl(0),
      Children: this.fb.array([]),
    });
  
  }

 childRange = ScheidenChildRange;
  childList = [
    this.childRange.ZeroToThree,
    this.childRange.FourToTwelve,
    this.childRange.ThirteenToSeventeen,
    this.childRange.OlderThanEighteen,
  ];

get ChildrenArray() {
    return this.profileForm.get("Children") as FormArray;
  }

  initChildRow(age) {
    return this.fb.group({
      Age: new FormControl(age),
      BSOOrVSO: new FormControl(null),
      BSOOrVSOCostsPerMonth: new FormControl(null),
      BSOOrVSOHoursAWeek: new FormControl(null),
      Childminder: new FormControl(null),
      ChildminderCostsPerMonth: new FormControl(null),
      ChildminderHoursAWeek: new FormControl(null),
      FormalChildcare: new FormControl(null),
    });
  }

  addChild(count: number, childRange: ScheidenChildRange) {
    this.ChildrenArray.push(this.initChildRow(childRange));
    this.onInputChange.next();
  }

  removeChild(age: any) {
    const index = this.ChildrenArray.controls.findIndex(
      (c) => c.value.Age === age.index
    );
    this.ChildrenArray.removeAt(index);
    this.removeEvent.next(age);
    this.onInputChange.next();
  }
  

 
        <counter *ngFor="let child of childList | keyvalue; index as i" (incremented)="addChild($event, child.value)"
          (decremented)="removeChild($event)" [decrementEvent]="removeEvent.asObservable()" [index]="i" [max]="5"
          [label]="child.value | getChildRange">
        </counter>


    <div formArrayName="Children">
      <ng-container *ngFor="let child of ChildrenArray.controls; index as i">
        <child-questions *ngIf="child.get('Age').value === 0 || child.get('Age').value === 1"
          [Descriptions]="Descriptions" [formGroupName]="i" [Index]="i" [form]="child"
          (removeChildEv)="removeChild($event)" (inputChanged)="radioChecked()">
        </child-questions>
  

встречный компонент

 increment() {
    if (this.counter === this.max) {
      return;
    }
    this.counter  = 1;
    this.incremented.emit({ count: this.counter, index: this.index });
  }

  decrement() {
    if (
      (!this.negativeAllowed amp;amp; this.counter === 0) ||
      this.counter < this.min
    ) {
      return;
    }
    this.counter -= 1;
    this.decremented.emit({ count: this.counter, index: this.index });
  }

  constructor() {}

  ngOnInit() {
    if (this.decrementEvent) {
      this.eventsSubscription = this.decrementEvent.subscribe((data) => {
        console.log("Counter", data);
        if (this.index === data.index) {
          this.decrement();
        }
      });
    }
  }

  @HostListener("unloaded")
  ngOnDestroy(): void {
    this.eventsSubscription.unsubscribe();
  }
  

Чтобы удалить FormGroup из FormArray, просто передайте индекс FormGroup функции.

В шаблоне:

     <div formArrayName="Children">
  <ng-container *ngFor="let child of ChildrenArray.controls; index as i">
    <child-questions *ngIf="child.get('Age').value === 0 || child.get('Age').value === 1"
      [Descriptions]="Descriptions" [formGroupName]="i" [Index]="i" [form]="child"
      (removeChildEv)="removeChild($event,i)" (inputChanged)="radioChecked()">
    </child-questions>
  

В функции removeChild:

 removeChild(age: any, index: number) {
  this.ChildrenArray.removeAt(index);
  this.removeEvent.next(age);
  this.onInputChange.next();
}