mdb

.ts

<mdb-card>
    <mdb-card-header class="info-color white-text text-center py-4">
        <h5>
            <strong>{{pageTitle}}</strong><a class="help" (click)="openModal()"mdbPopover="HELP"
                                   placement="top"
                                   mdbPopoverHeader="{{flyoverhelp}}"
                                   aria-label="open help menu button"
                                   tabindex="0"
                                   triggers="hover"><mdb-icon fas icon="question-circle" class="mr-1"></mdb-icon></a>
        </h5>
    </mdb-card-header>
    <mdb-card-body class="px-lg-10 pt-0">
        <form class="text-center" style="color: #757575;" [formGroup]="userInfoForm" (ngSubmit)="onSubmit()">
            <div *ngIf="currentView == 'userInfo'" id="form-container" class="md-form">
                <div class="md-form md-outline">
                    <input type="text" id="firstnameinput" formControlName="firstName" maxlength="124" class="form-control" mdbInput mdbValidate autofocus>
                    <label for="firstnameinput">First Name</label>
                    <mdb-error *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)">First Name is required</mdb-error>
                </div>
                <div class="md-form md-outline">
                    <input type="text" id="lastnameinput" formControlName="lastName" maxlength="125" class="form-control" mdbInput mdbValidate>
                    <label for="lastnameinput">Last Name</label>
                    <mdb-error *ngIf="lastName.invalid && (lastName.dirty || lastName.touched)">Last Name is required</mdb-error>
                </div>
                <div class="horizontal-input-group">
                    <div id="phonenumbercontainer"class="md-form md-outline">
                        <input type="text" id="phonenumberinput" formControlName="phoneNumber" maxlength="14" class="form-control" (input)="formatPhoneNumber()" mdbInput mdbValidate>
                        <label for="phonenumberinput">Phone Number</label>
                        <mdb-error *ngIf="phoneNumber.invalid && (phoneNumber.dirty || phoneNumber.touched)">Please enter a valid phone number</mdb-error>
                    </div>
                    <div id="emailcontainer" class="md-form md-outline">
                        <input type="email" id="emailinput" formControlName="email" maxlength="250" class="form-control" mdbInput mdbValidate>
                        <label for="emailinput">Email</label>
                        <mdb-error *ngIf="email.invalid && (email.dirty || email.touched)">Please enter a valid email address</mdb-error>
                    </div>
                </div>
                
            </div>
            <div *ngIf="currentView == 'questions'" class="md-form questionsHeight">
                <div class="md-form">
                    <div class="question-row-choice indent-left">
                        
                        <div class="question-text form-check form-check-inline">
                            <span class="question-row-choice-text" id="irs-question">
                                Is your Organization currently registered and in good standing with the IRS as a Tax Exempt Organization?  To find out, <a href="https://www.irs.gov/charities-non-profits" target="_blank">click here</a>
                            </span>
                        </div>
                        <div role="radiogroup" class="question-input form-check form-check-inline" aria-labelledby="irs-question" >
                            <div class="mpp-radio custom-control form-check-inline question-row-choice">
                                <input type="radio" style="display:none;" class="custom-control-input form-check-input" id="is501C3Yes" name="is501c3" formControlName="is501c3"
                                    value="Yes" (click)="toggleStateFiled('Yes')">
                                <label class="custom-control-label" for="is501C3Yes">Yes&nbsp;&nbsp;</label>
                            </div>
                            
                            <div class="mpp-radio custom-control form-check-inline question-row-choice">
                                <input type="radio" class="custom-control-input form-check-input" id="is501C3No" name="is501c3" formControlName="is501c3"
                                    value="No" (click)="toggleStateFiled('No')">
                                <label class="custom-control-label" for="is501C3No">No</label>
                            </div>

                            <mdb-error *ngIf="is501c3.invalid && (is501c3.dirty || is501c3.touched)">Please select a value</mdb-error>
                        </div>
                        
                    </div>
                    <div class="question-row-choice indent-left" *ngIf="showStateFiled">

                            <div class="question-text form-check form-check-inline">
                                <span class="question-row-choice-text" id="nonprofit-question">
                                    Is your Organization incorporated as a nonprofit in any state?
                                </span>
                            </div>
                            <div role="radiogroup" aria-labelledby="nonprofit-question" class="question-input form-check form-check-inline">
                                <div class="mpp-radio custom-control form-check-inline question-row-choice">
                                    <input type="radio" class="custom-control-input form-check-input" id="isStateFiledYes" name="isStateFiled" formControlName="isStateFiled"
                                       value="Yes">
                                    <label class="custom-control-label" for="isStateFiledYes">Yes&nbsp;&nbsp;</label>
                                </div>
                                
                                <div class="mpp-radio custom-control form-check-inline question-row-choice">
                                    <input type="radio" class="custom-control-input form-check-input" id="isStateFiledNo" name="isStateFiled" formControlName="isStateFiled"
                                       value="No">
                                    <label class="custom-control-label" for="isStateFiledNo">No</label>
                                </div>
                                
                                <mdb-error *ngIf="isStateFiled.invalid && (isStateFiled.dirty || isStateFiled.touched)">Please select a value</mdb-error>
                            </div>

                    </div>
                </div>
            </div>
        </form>
    </mdb-card-body>
</mdb-card>