Skip to content

Instantly share code, notes, and snippets.

@qdouble
qdouble / gist:9c291fb3dee28e0c5539
Last active December 30, 2015 10:54
Custom Form template validator - Angular 2
import {Directive, Provider, forwardRef, Attribute} from 'angular2/core'
import {NG_VALIDATORS, Control, Validator, Validators} from 'angular2/common'
import {CONST_EXPR} from 'angular2/src/facade/lang';
import * as modelModule from 'angular2/src/common/forms/model';
import {NumberWrapper} from "angular2/src/facade/lang";
/********* Email Validator **********/
export function emailValidator(control: modelModule.Control):{[key: string]: boolean} {
console.log('emailValidator processing');
import {Component, ViewChild, ViewChildren} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {Store} from '@ngrx/store';
import {INCREMENT, DECREMENT, RESET} from './../../../counter';
@Component({
selector: 'my-app',
template: `
<button (click)="increment()">Increment</button>
<div>Current Count: {{ counter | async }}</div>
@qdouble
qdouble / moment-pipe.ts
Created January 16, 2016 17:04
Moment Replacement for Date Pipe
import {Pipe, PipeTransform} from 'angular2/core';
import {isBlank, isPresent} from 'angular2/src/facade/lang';
import {StringMapWrapper} from 'angular2/src/facade/collection';
import * as moment from 'moment';
@Pipe({name: 'moment'})
export class MomentPipe implements PipeTransform {
static _ALIASES: {[key: string]: String} = {
'medium': 'MMM D YYYY, h:mm:ss A',
'short': 'M/D/YY, h:mm:ss A',
import {Directive, Input, Provider, forwardRef} from 'angular2/core';
import {NG_VALIDATORS, Control, Validator, Validators} from 'angular2/common';
import {CONST_EXPR} from 'angular2/src/facade/lang';
import * as modelModule from 'angular2/src/common/forms/model';
/********* Email Validator **********/
export function emailValidator(control: modelModule.Control): {[key: string]: boolean} {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (control.value === '' || re.test(control.value)) {
@qdouble
qdouble / input-field.html
Last active February 3, 2016 04:35
Input Html
<div class="form-group" [class.has-warning]="!myControl.valid && myControl.touched">
<label *ngIf="type !== 'checkbox'">{{label}}</label>
<input *ngIf="type === 'text'" [type]=type class="form-control"
[(ngFormControl)]=myControl [requiredVal]=required
[patternValidator]="pattern" [focusOn]=focusOn
>
<input *ngIf="type === 'number'" [type]=type class="form-control"
[(ngFormControl)]=myControl [requiredVal]=required
[min]=min [max]=max [focusOn]=focusOn
>
@qdouble
qdouble / input-field.ts
Last active February 3, 2016 04:32
Input TS
import {
Component,
ChangeDetectionStrategy,
ChangeDetectorRef,
Input
} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';
import {APPLICATION_VALIDATORS} from './application-validators';
import {FocusOn} from './focus-on.directive.ts';
import {Control} from 'angular2/common';
@qdouble
qdouble / Username Validation
Created July 13, 2016 02:42
Username validator
import { FormControl } from '@angular/forms';
import { AsyncValidatorFn, ValidatorFn } from '@angular/forms/src/directives/validators';
import { Control } from '@angular/common';
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { API_USER_URL } from '../services/constants';
@Injectable()
@qdouble
qdouble / app.module.ts
Last active August 6, 2016 17:55
ngModules config
const MATERIAL_DESIGN_DIRECTIVES = [
MdButton,
MdInput,
];
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule,
@qdouble
qdouble / routes.ts
Created August 6, 2016 17:57
Route Config
import { RouterConfig } from '@angular/router';
import {
AffiliatesRoutes,
ConfigRoutes,
CreditsRoutes,
Dashboard,
OffersRoutes,
PrizesRoutes,
SitesRoutes,
@qdouble
qdouble / home.module.ts
Last active August 18, 2016 08:38
Routing to Module Components from Parent
@NgModule({
imports: [
CommonModule
],
declerations: [HomeComponent],
exports: [HomeComponent]
})
export class HomeModule {}