import { Component } from '@angular/core';
import { MbscFormOptions } from '@mobiscroll/angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    formSettings: MbscFormOptions = {
        lang: '',
        theme: ''
    };
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MbscFormOptions, MbscPopupOptions } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(public fb: FormBuilder) {
    this.reactiveForm = fb.group({
      username: ['', [Validators.required, Validators.minLength(2)]],
      gender: ['', Validators.required],
      bio: ['', [Validators.required, Validators.minLength(20)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  formSettings: MbscFormOptions = {
    lang: '',
    theme: ''
  };

  errorMessages = {
    username: {
      required: 'Username required',
      minlength: 'Has to be at least 2 characters'
    },
    gender: {
      required: 'Gender required'
    },
    bio: {
      required: 'Bio required',
      minlength: 'Don\'t be shy, surely you can tell more'
    },
    email: {
      required: 'Email address required',
      email: 'Invalid email address'
    },
    password: {
      required: 'Password required',
      minlength: 'At least 6 characters required'
    }
  };

  @ViewChild('thanks')
  thanksPopup: any;

  popupSettings: MbscPopupOptions = {
    theme: '',
    display: 'center',
    focusOnClose: false,
    buttons: [{
      text: 'Log in',
      handler: 'set'
    }]
  };

  // Template driven form
  @ViewChild('templateForm')
  templateForm: any;
  templateSubmitted = false;
  username = '';
  email = '';
  password = '';
  gender = '';
  bio = '';

  // Reactive Form
  reactiveForm: FormGroup;
  reactiveSubmitted = false;

  // Template Driven Form

  registerTempl() {
    this.templateSubmitted = true;
    if (this.templateForm && this.templateForm.valid && this.thanksPopup) {
      this.thanksPopup.instance.show();
    }
  }

  // Reactive Form

  getErrorState(field: string) {
    const ctrl = this.reactiveForm.get(field);
    return ctrl.invalid && this.reactiveSubmitted;
  }

  registerReact() {
    this.reactiveSubmitted = true;
    if (this.reactiveForm.valid && this.thanksPopup) {
      this.thanksPopup.instance.show();
    }
  }

  getErrorMessage(field: string, form: string) {
    const formCtrl = (form === 'reactive' ? this.reactiveForm : this.templateForm.control);
    let message = '';
    if (formCtrl) {
      const ctrl = formCtrl.get(field);
      if (ctrl && ctrl.errors) {
        for (const err in ctrl.errors) {
          if (!message && ctrl.errors[err]) {
            message = this.errorMessages[field][err];
          }
        }
      }
    }
    return message;
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { MbscFormOptions } from '@mobiscroll/angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    formSettings: MbscFormOptions = {
        lang: '',
        theme: ''
    };
}

.md-create-account {
    padding: 0 !important;
}

.md-create-account .md-cac-title {
    text-align: center;
    padding-bottom: 3em;
}

.md-create-account .md-cac-title,
.md-create-account .md-cac-cont {
    padding-top: 0;
}

.md-create-account .md-cac-cont {
    padding-bottom: 0;
}

.md-create-account .md-chart-pic {
    background-image: url("/content/img/demos/chart@1x.png");
    height: 150px;
    background-repeat: no-repeat;
    background-position: center;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 144dpi) {
    .md-create-account .md-chart-pic {
        background: url("/Content/img/demos/chart@2x.png") no-repeat center 12px;
        background-size: 109px 81px;
        background-position: center;
    }
}

.md-phone-num .mbsc-np-dsp {
    min-height: 25px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MbscFormOptions } from '@mobiscroll/angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {

    constructor(private formBuilder: FormBuilder) {
        this.form = formBuilder.group({
            username: ['', [Validators.required, Validators.minLength(4)]],
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z]).{6,}')]]
        });
    }

    form: FormGroup;
    formSettings: MbscFormOptions = {
        lang: '',
        theme: ''
    };

    errorMessages = {
        username: {
            required: 'Name required',
            minlength: 'Please enter at least 4 characters.'
        },
        email: {
            required: 'Email required',
            email: 'Invalid email address'
        },
        password: {
            required: 'Password required',
            pattern: 'Invalid, please see rules'
        }
    };

    triedToSubmit = false;

    submit() {
        this.triedToSubmit = true;
        if (this.form.invalid) {
            const controls = this.form.controls;
            for (const control in controls) {
                if (controls[control]) {
                    controls[control].markAsDirty();
                    controls[control].markAsTouched();
                }
            }
        }
    }

    errorFor(field: string) {
        const control = this.form.controls[field];
        for (const validator in control.errors) {
            if (control.errors[validator]) {
                return this.errorMessages[field][validator];
            }
        }
        return null;
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { mobiscroll, MbscFormOptions } from '@mobiscroll/angular';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  constructor(private fb: FormBuilder) {
    this.loginForm = fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  loginForm: FormGroup;

  isLogin = false;
  attemptedSubmit = false;

  formSettings: MbscFormOptions = {
    lang: '',
    theme: ''
  };

  errorMessages = {
    required: '{$1} required',
    minlength: 'At least 6 characters required',
    email: 'Invalid email address'
  };

  markFieldsDirty() {
    const controls = this.loginForm.controls;
    for (const field in controls) {
      if (controls[field]) {
        controls[field].markAsDirty();
      }
    }
  }

  signUp() {
    this.attemptedSubmit = true;
    if (this.loginForm.valid) {
      mobiscroll.toast({
        message: 'Signed Up!',
        callback: () => {
          this.loginForm.reset();
          this.attemptedSubmit = false;
        }
      });
    } else {
      this.markFieldsDirty();
    }
  }

  logIn() {
    this.attemptedSubmit = true;
    if (this.loginForm.valid) {
      mobiscroll.toast({
        message: 'Logged In!',
        callback: () => {
          this.loginForm.reset();
          this.attemptedSubmit = false;
        }
      });
    } else {
      this.markFieldsDirty();
    }
  }

  errorFor(fieldName: string) {
    const field = this.loginForm.controls[fieldName];
    for (const validator in field.errors) {
      if (field.errors[validator]) {
        const friendlyName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
        return this.errorMessages[validator].replace('{$1}', friendlyName);
      }
    }
    return null;
  }

}

.md-login-form .md-logo {
    display: inline-block;
    width: 100%;
    font-size: 80px;
    text-align: center;
    height: 46px;
    margin: 130px 0 30px 0;
    color: #1c75bc;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }