member_webapp/src/packages/member/component/signup/signup.component.html

<form [formGroup]="signupForm" (ngSubmit)="signup()">
    <div class="card login-panel ui-fluid">
        <div class="ui-g">
            <div class="ui-g-12">
                <img src="assets/layout/images/logo-ultima.svg">
            </div>
            <div class="ui-g-12">
                <span class="md-inputfield">
                    <input id="email" type="email" pInputText class="input ng-dirty ng-invalid" placeholder="Email" formControlName="email" required>
                    <div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
                        Invalid email
                    </div>
                </span>
            </div>
            <div class="ui-g-12">
                <span class="md-inputfield">
                    <input id="password" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password"
                        required>
                    <div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
                        Invalid password
                    </div>
                </span>
            </div>
            <div class="ui-g-12">
                <span class="md-inputfield">
                    <input id="pwConfirm" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Retype your password" formControlName="pwConfirm"
                        required>
                    <div *ngIf="pwConfirm.touched && !pwConfirm.valid" class="ui-message ui-messages-error ui-corner-all">
                        Not matched password
                    </div>
                </span>
            </div>

            <div class="ui-g-12">
                <span class="md-inputfield">
                    <input id="name" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Name" formControlName="name" required>
                    <div *ngIf="name.touched && !name.valid" class="ui-message ui-messages-error ui-corner-all">
                        Invalid Name
                    </div>
                </span>
            </div>

            <div class="ui-g-12">
                <span class="md-inputfield">
                    <input id="phone" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Phone" formControlName="phone" required>
                    <div *ngIf="phone.touched && !phone.valid" class="ui-message ui-messages-error ui-corner-all">
                        Invalid phone number
                    </div>
                </span>
            </div>

            <div class="ui-g-12">
                <span class="md-inputfield">
                    <input id="company" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Company" formControlName="company" required>
                    <div *ngIf="company.touched && !company.valid" class="ui-message ui-messages-error ui-corner-all">
                        Invalid company name
                    </div>
                </span>
            </div>

            <div class="ui-g-12">
                <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
                    <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
                    <span class="ui-button-text ui-c">Sign Up</span>
                </button>
            </div>
        </div>
    </div>
</form>