htmlangularmat-dialog

Angular [mat-dialog-close]="false" does not work


Is there a certain reason, why [mat-dialog-close]="createFurtherCheckbox.checked ? 'false' : 'true'" does not work, if the value for [mat-dialog-close] is false? Within a dialog I create an object by clicking a submit button and if a certain checkbox is checked, which is questioning if I want to create another object, the dialogbox shall not close, so I can create another object (in this case a course). I want the dialog to reset and stay open, if the checkbox ist checked.

Even if I try [mat-dialog-close]="false" the dialog closes.

However [type]="createAnotherCheckbox.checked ? 'reset' : 'button'" does the 'reset'-type change correctly. (Used to reset the formControls within a form)

create-course-dialog.component.html

<mat-dialog-actions>
    <mat-checkbox #createFurtherCheckbox>Create another course?</mat-checkbox>
    <button mat-raised-button [mat-dialog-close]="createFurtherCheckbox.checked ? 'false' : 'true'" [type]="createFurtherCheckbox.checked ? 'reset' : 'button'"
            (click)="Submit()" [disabled]="courseForm.invalid">Create course</button>
    <button mat-raised-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

Solution

  • I think you misunderstand the input of the mat-dialog-close directive.

    @Input('mat-dialog-close')
    dialogResult: any
    

    You are setting the return value for the result you get when you subscribe to afterClosed like here

    dialogRef.afterClosed().subscribe(result => {
          console.log('The dialog was closed');
          this.animal = result;
        });
    

    fast workaround with ngif and two buttons

    <ng-container *ngIf="createAnotherCheckbox.checked">
       <button mat-raised-button type="reset" (click)="Submit()" [disabled]="courseForm.invalid">
        Create course</button>
    </ng-container>
    <ng-container *ngIf="!createAnotherCheckbox.checked">
       <button mat-raised-button type="button" (click)="Submit()" [disabled]="courseForm.invalid" 
        mat-dialog-close>Create course</button>
    </ng-container>