EmptyError: no elements in sequence

[andyrue]

This probably isn't a bug. I'm likely just doing it wrong.

I have a <div class='row' *ngFor='d of dependents'> with a Delete button in each rendered child which calls the following function:

removeDependent(index: number) {
    this.modal.confirm()
        .className(this.theme)
        .message('Yes or No?')
        .okBtn('Yes')
        .cancelBtn('No')
        .open()
        .then(dialog =>
          dialog.result.then(result => {
              this.form.controls.dependents.removeAt(index);
          }).catch(() =>{
            console.log("Cancelled!")
          })
        )

If I click Yes in the confirmation box it deletes the appropriate <div class='row'> and then throws the error EmptyError: no elements in sequence. I originally thought it was due to the modal getting destroyed because I was creating the modal from the component that the <div class='row'> contains, but I've since moved it to the parent component and still see the same error. The button that is calling the delete function IS getting destroyed though so maybe that's causing it? Suggestions? Thanks!

[shlomiassaf]

Can you post a bit more complete picture, I need to see the structure of the template

[andyrue]

Sorry, was trying to simplify it. :-) Here's the bigger picture.

In Parent component:

<div *ngIf='form.controls.dependents.length > 0'>
   <dependent-row #dependents
     *ngFor="let dependent of form.controls['dependents'].controls;
     let i=index;"
     [dependent]="dependent"
     (onRemoveDependent)="removeDependent($event)">
   </dependent-row>
</div>

And the corresponding child <dependent-row> component (simplified).

<div class='row' [formGroup]='dependent'>
  <div class='medium-3 columns'>
    <label>First name
      <input type="text" formControlName="first_name" required>
    </label>
  </div>
  <div class='medium-1 columns'>
    <a (click)='removeDependent()'>Remove</a>
  </div>
</div>

removeDependent() Function in child emits the event to the parent where it is then deleted.

removeDependent() {
  this.onRemoveDependent.next(this.index);
}

Which in turn calls the removeDependent() function in my original post that prompts to confirm and splices the item from the array on acceptance, removing the corresponding <dependent-row>.

I see now there's more to that error as well. This is above the ORIGINAL EXCEPTION: EmptyError: no elements in sequence error.

Error in ./CSSBackdrop class CSSBackdrop_Host - inline template:0:0

Thanks for looking!

[andyrue]

Well, I'm not sure what was causing that, but I've since moved my modal into a service that returns an observable of true or false and I'm no longer getting that error.