Cacher is the code snippet organizer for pro developers

<!-- SignUpForm -->
          <form class="signup-form" #signupForm="ngForm" (ngSubmit)="submit(signupForm)">

            <ion-list>

              <ion-item>
                <ion-label stacked>User Name</ion-label>
                <span>00</span>
                <ion-input required type="text" name="username" [(ngModel)]='register.username' #username="ngModel"
                  (change)="log(username)">
                </ion-input>
              </ion-item>
              <div class="validation-error" *ngIf="username.touched && !username.valid">
                <p *ngIf="username.errors.required">*user name required</p>
              </div>


              <ion-item>
                <ion-label stacked>Phone Number</ion-label>
                <ion-input required type="number" name="phoneNumber" [(ngModel)]='register.phoneNumber' #phoneNumber="ngModel"
                  (change)="log(phoneNumber)" placeholder="ex: 58662565665">
                </ion-input>



              </ion-item>
              <div class="validation-error" *ngIf="phoneNumber.touched && !phoneNumber.valid">
                *phone number required
              </div>

              <ion-item>
                <ion-label stacked>Password</ion-label>
                <ion-input required minlength="8" type="password" name="password" [(ngModel)]='register.password' #password="ngModel"
                  (change)="log(password)"></ion-input>
                <button icon-only ion-button clear type="button" item-right (click)="showPwd=!showPwd">
                  <ion-icon *ngIf="showPwd" name="eye"></ion-icon>
                  <ion-icon *ngIf="!showPwd" name="eye-off"></ion-icon>
                </button>
              </ion-item>
              <div class="validation-error" *ngIf="password.touched && !password.valid">
                *password required
              </div>


              <ion-item>
                <ion-label stacked>City</ion-label>
                <ion-select name="city" required [(ngModel)]='register.cityId' #city="ngModel">
                  <!-- #city="ngModel"  (change)="log(city)" -->
                  <ion-option *ngFor="let city of availableCities; let i = index" [value]="city.id">
                    {{city.name}}
                  </ion-option>
                </ion-select>
              </ion-item>
              <div class="validation-error" *ngIf="city.touched && !city.valid">
                *city required
              </div>


              <ion-item>
                <span class="setDob" (click)=setDob()>
                  <ion-icon name="calendar"></ion-icon>
                  Date Of Birth
                </span>
                <p class="dob" *ngIf="date !== undefined">{{date.toDateString()}}</p>
              </ion-item>
              <div class="validation-error" *ngIf="!date == null">
                *DOB required
              </div>

            </ion-list>
            <div class="terms">
              <!-- <ion-checkbox required checked="true" name="terms" ngModel #terms="ngModel" (ionChange)="termsChecked(terms)"></ion-checkbox> -->
              <ion-checkbox checked="false" name="terms" #terms [(ngModel)]="isTerms" (ionChange)="termsChecked(terms)"></ion-checkbox>

              <p>Agree to our terms and conditions</p>
            </div>
            <!-- <div class="validation-error" *ngIf="terms.touched && !terms.valid">
              *city required
            </div> -->

            <!-- <p>{{signupForm.value | json}}</p> -->

            <button class="submitt" ion-button round outline>Sign Up</button>

          </form>