<form [formGroup]="mailForm" novalidate (submit)="sendEmail()">
    <div class="pb-16">
        <mat-form-field class="full-width">
            <input
            matInput
            formControlName="to"
            placeholder="To">
        </mat-form-field>
        <small 
        *ngIf="mailForm.controls.to.errors && (mailForm.controls.to.dirty || mailForm.controls.to.touched) && (mailForm.controls.to.errors.required)" 
        class="form-error-msg"> Email is required </small>
        <small 
        *ngIf="mailForm.controls.to.errors && (mailForm.controls.to.dirty || mailForm.controls.to.touched) && (mailForm.controls.to.errors.email)" 
        class="form-error-msg"> Invaild email address </small>
    </div>

    <div class="pb-16">
        <mat-form-field class="full-width">
            <input
            matInput
            name="subject"
            formControlName="subject"
            placeholder="Subject"
            value="">
        </mat-form-field>
        <small 
        *ngIf="mailForm.controls.subject.errors && 
        (mailForm.controls.subject.dirty || mailForm.controls.subject.touched) && 
        (mailForm.controls.subject.errors.required)" 
        class="form-error-msg"> Subject is required </small>
    </div>
    <div class="pb-16">
        <quill-editor theme="snow" formControlName="message"></quill-editor>
        <small 
        *ngIf="mailForm.controls.message.errors && 
        (mailForm.controls.message.dirty || mailForm.controls.message.touched) && 
        (mailForm.controls.message.errors.required)" 
        class="form-error-msg"> Message is required </small>
    </div>

    <div class="">
        <button
        type="button"
        mat-button 
        matDialogClose>Cancel</button>
        <span fxFlex></span>
        <button mat-icon-button><mat-icon>attachment</mat-icon></button>
        <button mat-mini-fab class="mat-primary" type="submit"><mat-icon>send</mat-icon></button>
    </div>
</form>