Skip to content

Instantly share code, notes, and snippets.

@mseemann
Last active October 13, 2019 06:40
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mseemann/39d50d07a191be1df2c2d8f5ea244f7d to your computer and use it in GitHub Desktop.
Save mseemann/39d50d07a191be1df2c2d8f5ea244f7d to your computer and use it in GitHub Desktop.
Reactive Forms Example(ts)
import {
Component,
OnInit
} from '@angular/core';
import { flyInOutTrigger } from './../animations/flyInOutTrigger-animation';
import { hostConfig } from './../animations/flyInOutTrigger-animation';
import {
FormGroup,
FormControl,
Validators,
FormBuilder
} from '@angular/forms';
import 'rxjs/add/operator/filter';
import {
Router,
ActivatedRoute
} from '@angular/router';
import { Title } from '@angular/platform-browser';
import { AbstractDemoComponent } from './../abstract-demo.component';
const emailValidator = Validators.pattern('^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$');
@Component({
moduleId: module.id,
selector: 'reactive-form-demo',
host: hostConfig,
animations: [
flyInOutTrigger
],
templateUrl: 'reactiveform.component.html'
})
export class ReactiveFormsDemo extends AbstractDemoComponent implements OnInit {
public form: FormGroup;
public firstName = new FormControl('');
public lastName = new FormControl('', Validators.required);
public email = new FormControl('', emailValidator);
public email2 = new FormControl('', emailValidator);
public breakfast = new FormControl('Continental');
public toDrink = new FormControl('Tea')
constructor(router: Router, route: ActivatedRoute, titleService: Title, private fb: FormBuilder) {
super(router, route, titleService);
}
public ngOnInit() {
super.ngOnInit();
this.form = this.fb.group({
'firstName': this.firstName,
'lastName': this.lastName,
'email': this.email,
'email2': this.email2,
'breakfast': this.breakfast,
'toDrink': this.toDrink
});
this.form.valueChanges
.map((formValues) => {
formValues.firstName = formValues.firstName.toUpperCase();
return formValues;
})
// .filter((formValues) => this.form.valid)
.subscribe((formValues) => {
console.log(`Model Driven Form valid: ${this.form.valid} value:`, JSON.stringify(formValues));
});
}
public onSubmit() {
console.log(this.form);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment