Angular Forms Inside a modal Example

When working with the event calendar you will usually want to show an add/edit form in a popup rather than render it directly into the page markup. Simply configure the popup and add your form fields to it.

Interested in add/edit screens for events? Check out this example of a fully functional event form →

Get started with this example

Javascript jQuery Angular React Vue

html<mbsc-button
    (click)="openPopup($event)">Show modal
</mbsc-button>
<mbsc-popup [options]="popupSettings" #popup>
    <div class="mbsc-form-group">
        <mbsc-input label="Title"></mbsc-input>
        <mbsc-textarea label="Description"></mbsc-textarea>
    </div>
    <div class="mbsc-form-group">
        <mbsc-switch label="All-day"></mbsc-switch>
        <mbsc-input label="Starts"></mbsc-input>
        <mbsc-input label="Ends"></mbsc-input>
        <mbsc-segmented-group name="my-group">
            <mbsc-segmented [checked]="true">Show as busy</mbsc-segmented>
            <mbsc-segmented>Show as free</mbsc-segmented>
        </mbsc-segmented-group>
    </div>
</mbsc-popup>
                                     
tsinst!: MbscPopup;

popupSettings: MbscPopupOptions = {
    buttons: [
        'set',
        'cancel'
    ],
    display: 'anchored',
};

openPopup(event: any): void {
    this.popupSettings.anchor = event.target;
    this.inst.open();
}
                                     