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

<p-dialog header="Terms Of Use" [modal]="true" [width]="800" [(visible)]="termsDisplay" [showHeader]="true" [closeOnEscape]="false">
  <of-member-terms (close)="onTermsDisplayClose()"></of-member-terms>
</p-dialog>
<p-dialog header="Terms Of Use" [modal]="true" [width]="800" [(visible)]="policyDisplay" [showHeader]="true" [closeOnEscape]="false">
  <of-member-policy (close)="onPolicyDisplayClose()"></of-member-policy>
</p-dialog>


<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/overFlow_CI_blue_185.png">
      </div>
      <div class="ui-g-12">
          <span class="md-inputfield">
              <input type="email"
                     id="email"
                     pInputText
                     class="input ng-dirty ng-invalid"
                     placeholder="Email"
                     formControlName="email" required
                     value="geekhot@hotmail.co.kr" />
              <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 type="password"
                     id="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">
        <a href="javascript:void(0)" (click)="termsDisplayOpen()">Terms Of Use</a>
        |
        <a href="javascript:void(0)" (click)="policyDisplayOpen()">Privacy Policy</a>
      </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>

        <a href="/auth/signin">Sign In</a>
      </div>
    </div>
  </div>
</form>