Commit f6d29e99 authored by Roman Klauser's avatar Roman Klauser

done

parent 341335de
......@@ -23,7 +23,8 @@
"src/assets"
],
"styles": [
"src/styles.css"
"src/styles.css",
"node_modules/bulma/bulma.sass"
],
"scripts": []
},
......
......@@ -1729,6 +1729,11 @@
"integrity": "sha1-y5T662HIaWRR2zZTThQi+U8K7og=",
"dev": true
},
"bulma": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.1.tgz",
"integrity": "sha512-wRSO2LXB+qI9Pyz2id+uZr4quz5aftSN7Ay1ysr1+krzVp3utD+Ci4CeKuZdrYGc800t65b7heXBL6qw2Wo/lQ=="
},
"bytes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
......
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title">
Angular forms
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
<h2 class="subtitle">
template driven vs. reactive
</h2>
</div>
</div>
</section>
<div class="container">
<app-template-driven></app-template-driven>
<hr>
<app-reactive></app-reactive>
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
......@@ -2,13 +2,17 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {TemplateDrivenModule} from './template-driven/template-driven.module';
import {ReactiveModule} from './reactive/reactive.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
BrowserModule,
TemplateDrivenModule,
ReactiveModule
],
providers: [],
bootstrap: [AppComponent]
......
<div class="columns">
<div class="column">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<label>Firstname:</label>
<input type="text" formControlName="first">
<label>Lastname:</label>
<input type="text" formControlName="last">
<label>Street:</label>
<input type="text" formControlName="street">
<label>Zip:</label>
<input type="text" formControlName="zip">
<label>City:</label>
<input type="text" formControlName="city">
<button type="submit" [disabled]="form.invalid">Submit</button>
</form>
</div>
<div class="column">
<h2>Values:</h2>
<pre>
{{ form.value | json }}
</pre>
</div>
<div class="column">
<h2>Errors:</h2>
<pre>
First name: {{ form.get('first').errors | json }} <br>
Last name: {{ form.get('last').errors | json }} <br>
Street: {{ form.get('street').errors | json }} <br>
Zip: {{ form.get('zip').errors | json }} <br>
City: {{ form.get('city').errors | json }} <br>
</pre>
</div>
</div>
input {
display: block;
width: 100%;
}
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {validateCity} from '../validators/city.validator';
@Component({
selector: 'app-reactive',
templateUrl: 'reactive.component.html',
styleUrls: ['reactive.component.scss']
})
export class ReactiveComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
/* this.form = new FormGroup({
first: new FormControl('Peter'),
last: new FormControl(),
street: new FormControl(),
zip: new FormControl(),
city: new FormControl()
});*/
this.form = this.formBuilder.group({
first: ['Peter', [Validators.required, Validators.minLength(4)]],
last: ['Müller', [Validators.required, Validators.minLength(4)]],
street: null,
zip: null,
city: ['', [Validators.required, validateCity]]
});
}
ngOnInit() {
this.form.valueChanges.subscribe(changes => {
console.log(changes);
if (changes.first === 'Klaus') {
alert('!');
}
});
this.form.statusChanges.subscribe(console.log);
}
onSubmit() {
console.log(this.form.getRawValue());
}
}
import { ReactiveModule } from './reactive.module';
describe('ReactiveModule', () => {
let reactiveModule: ReactiveModule;
beforeEach(() => {
reactiveModule = new ReactiveModule();
});
it('should create an instance', () => {
expect(reactiveModule).toBeTruthy();
});
});
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ReactiveComponent} from './reactive.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
ReactiveComponent
],
exports: [
ReactiveComponent
]
})
export class ReactiveModule { }
input {
display: block;
width: 100%;
}
<div class="container">
<div class="columns">
<div class="column">
<form #form="ngForm" (ngSubmit)="logForm(form.value)">
<label>Firstname:</label>
<input type="text"
name="first"
[(ngModel)]="first"
#firstRef="ngModel"
required minlength="4">
<label>Lastname:</label>
<input type="text"
name="last"
ngModel
required minlength="4"
#lastRef="ngModel">
<label>Street:</label>
<input type="text" name="street" ngModel>
<label>Zip:</label>
<input type="text" name="zip" ngModel>
<label>City:</label>
<input type="text"
name="city"
ngModel
required appCityValidation
#cityRef="ngModel">
<button type="submit">Submit</button>
</form>
</div>
<div class="column">
<h2>Values:</h2>
<pre>
{{ form.value | json }}
</pre>
</div>
<div class="column">
<h2>Errors:</h2>
<pre>
First name: {{ firstRef.errors | json }}
Last name: {{ lastRef.errors | json }}
City: {{ cityRef.errors | json }}
</pre>
</div>
</div>
</div>
import {Component} from '@angular/core';
@Component({
selector: 'app-template-driven',
templateUrl: 'template-driven.component.html',
styleUrls: ['tempalate-driven.component.scss']
})
export class TemplateDrivenComponent {
first = 'Max';
logForm(value: any) {
console.log(value);
}
}
import { TemplateDrivenModule } from './template-driven.module';
describe('TemplateDrivenModule', () => {
let templateDrivenModule: TemplateDrivenModule;
beforeEach(() => {
templateDrivenModule = new TemplateDrivenModule();
});
it('should create an instance', () => {
expect(templateDrivenModule).toBeTruthy();
});
});
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {TemplateDrivenComponent} from './template-driven.component';
import {FormsModule} from '@angular/forms';
import {CityValidatorDirective} from '../validators/city.template.validator';
@NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
TemplateDrivenComponent,
CityValidatorDirective
],
exports: [
TemplateDrivenComponent
]
})
export class TemplateDrivenModule { }
import {AbstractControl, NG_VALIDATORS, Validator} from '@angular/forms';
import {Directive, Input} from '@angular/core';
@Directive({
selector: '[appCityValidation]',
providers: [{provide: NG_VALIDATORS, useExisting: CityValidatorDirective, multi: true}]
})
export class CityValidatorDirective implements Validator {
@Input()
input: string;
validate(control: AbstractControl): { [key: string]: any } | null {
return control.value !== 'Münster' ? {validCity: true} : null;
}
}
import {AbstractControl} from '@angular/forms';
export function validateCity(control: AbstractControl) {
if (control.value !== 'Münster') {
return {validCity: true};
}
return null;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment