Skip to content

A
angular-component-paths-exercise
Commit e5f38b8b authored by Shaphen's avatar Shaphen
Browse files
Options

Add account component with 2 forms

parent df095486
Hide whitespace changes
Inline Side-by-side
Showing with 389 additions and 24 deletions
package-lock.json
View file @ e5f38b8b
......@@ -434,6 +434,141 @@
"tslib": "^2.0.0"
}
},
"@angular/localize": {
"version": "11.2.10",
"resolved": "https://registry.npmjs.org/@angular/localize/-/localize-11.2.10.tgz",
"integrity": "sha512-MjJ5aOumlXZoTTtB2gfy1Y6NZmGjqOUL5t5D3jXaSCl0rUdwDglB35zKYrqRyUYoGoXSdAuZzkLdREinzZz6eA==",
"dev": true,
"requires": {
"@babel/core": "7.8.3",
"glob": "7.1.2",
"yargs": "^16.2.0"
},
"dependencies": {
"@babel/core": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.3.tgz",
"integrity": "sha512-4XFkf8AwyrEG7Ziu3L2L0Cv+WyY47Tcsp70JFmpftbAA1K7YL/sgE9jh9HyNj08Y/U50ItUchpN0w6HxAoX1rA==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.8.3",
"@babel/generator": "^7.8.3",
"@babel/helpers": "^7.8.3",
"@babel/parser": "^7.8.3",
"@babel/template": "^7.8.3",
"@babel/traverse": "^7.8.3",
"@babel/types": "^7.8.3",
"convert-source-map": "^1.7.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.1",
"json5": "^2.1.0",
"lodash": "^4.17.13",
"resolve": "^1.3.2",
"semver": "^5.4.1",
"source-map": "^0.5.0"
}
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"dev": true,
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"glob": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"dev": true
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"dev": true
},
"wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dev": true,
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
}
},
"y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"dev": true
},
"yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"dev": true,
"requires": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
}
},
"yargs-parser": {
"version": "20.2.7",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
"integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
"dev": true
}
}
},
"@angular/platform-browser": {
"version": "11.2.10",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.10.tgz",
......@@ -2206,6 +2341,14 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
"angular-responsive-carousel": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/angular-responsive-carousel/-/angular-responsive-carousel-2.0.2.tgz",
"integrity": "sha512-ade+YNVnZiq7q7Ljwhp5jk+p/+zT+k+iRC1V+rjbRB93L6qqvoDOjSl6y7TugzMyvk/QumWVsFnQGlB9O3IRsQ==",
"requires": {
"tslib": "^2.0.0"
}
},
"ansi-colors": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
......@@ -7568,6 +7711,21 @@
"json5": "^2.1.2"
}
},
"localize": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/localize/-/localize-0.4.7.tgz",
"integrity": "sha1-47aeWsHuR/4hH/B6Arjy6Wm/nPo=",
"requires": {
"commander": "~2.1.0"
},
"dependencies": {
"commander": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.1.0.tgz",
"integrity": "sha1-0SG7roYNmZKj1Re6lvVliOR8Z4E="
}
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
......
package.json
View file @ e5f38b8b
......@@ -20,7 +20,9 @@
"@angular/platform-browser-dynamic": "~11.2.10",
"@angular/router": "~11.2.10",
"@ng-bootstrap/ng-bootstrap": "^9.1.0",
"angular-responsive-carousel": "^2.0.2",
"bootstrap": "^4.6.0",
"localize": "^0.4.7",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
......@@ -29,6 +31,7 @@
"@angular-devkit/build-angular": "~0.1102.9",
"@angular/cli": "~11.2.9",
"@angular/compiler-cli": "~11.2.10",
"@angular/localize": "^11.2.10",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
......
src/app/account/account.component.css 0 → 100644
View file @ e5f38b8b
.invalid-text{
color:red;
}
.ng-invalid.ng-touched:not(form) {
border: 2px solid red;
}
\ No newline at end of file
src/app/account/account.component.html 0 → 100644
View file @ e5f38b8b
<div>
<div style="display:inline-block">
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<div>
<p>reactive</p>
<div>
<input type="text" formControlName="firstName" class="form-control input" placeholder="First name">
</div>
<div>
<input type="text" formControlName="lastName" class="form-control input " placeholder="Last name">
</div>
</div>
<input type="email" formControlName="email" class="form-control input" placeholder="E-mail">
<div>
<button type="submit">Sign in</button>
</div>
</form>
<div >
<ngb-alert *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert>
<!-- <div class= "invalid-text" *ngIf="showMessage">
{{invalidEntry}}
</div> -->
</div>
</div>
<!-- template driven form -->
<div style="display:inline-block; margin-left: 10em;">
<form #newUserForm="ngForm" (ngSubmit)="onSubmit2(newUserForm)">
<div>
<p>template-driven</p>
<input type="text" class="input" placeholder="User name"
required
[(ngModel)]="userName" name="userName" pattern="[a-zA-Z ]*"
#pickedName="ngModel">
<div *ngIf="!pickedName.valid && pickedName.touched">
User name is required!
</div>
</div>
<div>
<input type="email" class="input" placeholder="Email"
required [(ngModel)]="email"
name="email" #userEmail="ngModel" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}">
<div *ngIf="!userEmail.valid && userEmail.touched">
Email is not valid!
</div>
</div>
<div>
<input type="password" class="input" placeholder="Password"
required
[(ngModel)]="password" name="password"
#userPassword="ngModel">
<div *ngIf="!userPassword.valid && userPassword.touched">
Password is required!
</div>
</div>
<button type="submit" [disabled]="!newUserForm.form.valid">
Register
</button>
<button type="button" (click)="newUserForm.reset()">
Reset
</button>
</form>
<!-- <pre>{{ newUserForm.form.value }}</pre> Value of whole form -->
<!-- <pre>User name: {{ pickedName.value }}</pre> Value of userName field -->
<pre>Valid form? {{ newUserForm.form.valid }}</pre>
</div>
</div>
src/app/account/account.component.spec.ts 0 → 100644
View file @ e5f38b8b
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AccountComponent } from './account.component';
describe('AccountComponent', () => {
let component: AccountComponent;
let fixture: ComponentFixture<AccountComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AccountComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AccountComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/account/account.component.ts 0 → 100644
View file @ e5f38b8b
import { Component, OnInit } from '@angular/core';
import { FormBuilder,Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.css']
})
export class AccountComponent implements OnInit {
public userForm;
public showMessage: boolean = false;
public invalidEntry = 'Invalid entry';
// template driven form
userName = '';
email: string;
nickName: string;
password: string;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.userForm = this.formBuilder.group({
firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
lastName: ['',[ Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
email: ['', [ Validators.required,Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}')]]
});
}
onSubmit(){
if(this.userForm.valid){
alert('User form is valid!!')
} else {
alert('User form is not valid!!')
}
}
onSubmit1(){
if(!this.userForm.valid){
this.showMessage = true;
}
}
//template driven
onSubmit2(form: NgForm) {
if (form.valid) {
console.log(form.value);
// ...our form is valid, we can submit the data
}
}
}
src/app/app-routing.module.ts
View file @ e5f38b8b
......@@ -4,17 +4,19 @@ import { EnglandComponent } from './england/england.component';
import { FranceComponent } from './france/france.component';
import { GreeceComponent } from './greece/greece.component';
import { SpainComponent } from './spain/spain.component';
import { AccountComponent } from './account/account.component';
const routes: Routes = [
{ path:'england', component: EnglandComponent },
{ path:'france', component: FranceComponent },
{ path:'greece', component: GreeceComponent },
{ path:'spain', component: SpainComponent },
// {path:'account', component: AccountComponent}
{path:'account', component: AccountComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export class AppRoutingModule { }
\ No newline at end of file
src/app/app.module.ts
View file @ e5f38b8b
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { EnglandComponent } from './england/england.component';
......@@ -10,21 +11,28 @@ import { FranceComponent } from './france/france.component';
import { GreeceComponent } from './greece/greece.component';
import { SpainComponent } from './spain/spain.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { IvyCarouselModule } from 'angular-responsive-carousel';
import { AccountComponent } from './account/account.component';
@NgModule({
declarations: [
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
EnglandComponent,
FranceComponent,
GreeceComponent,
SpainComponent
SpainComponent,
AccountComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule
ReactiveFormsModule,
NgbModule,
IvyCarouselModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
......
src/app/england/england.component.html
View file @ e5f38b8b
<div class="location-component-container">
<h2>England</h2>
<div class='imgContainer' >
<img class='img' src='assets/images/england/england-bridge.jpg' />
<img class='img' src='assets/images/england/england-parliament.jpg' />
<img class='img' src='assets/images/england/england-stonehedge.jpg' />
</div>
<div class='imgContainer' >
<ngb-carousel>
<ng-template ngbSlide>
<img class='img' src='assets/images/england/england-bridge.jpg' />
</ng-template>
<ng-template ngbSlide>
<img class='img' src='assets/images/england/england-parliament.jpg' />
</ng-template>
<ng-template ngbSlide>
<img class='img' src='assets/images/england/england-stonehedge.jpg' />
</ng-template>
</ngb-carousel>
</div>
<p class="location-desc">
England is a country that is part of the United Kingdom. It shares land borders with Wales to its west and
......
src/app/england/england.component.ts
View file @ e5f38b8b
import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-england',
......@@ -7,7 +8,13 @@ import { Component, OnInit } from '@angular/core';
})
export class EnglandComponent implements OnInit {
constructor() { }
constructor(config: NgbCarouselConfig) {
config.interval = 3000;
config.wrap = true;
config.keyboard = false;
config.pauseOnHover = true;
config.animation
}
ngOnInit(): void {
}
......
src/app/france/france.component.html
View file @ e5f38b8b
......@@ -2,9 +2,9 @@
<h2>France</h2>
<div class='imgContainer' >
<img class='img' src='assets/images/france/france-cafe.jpg' />
<img class='img' src='assets/images/france/france-tower.jpg' />
<img class='img' src='assets/images/france/france-town.jpg' />
<img class='img' src='assets/images/france/france-cafe.jpg' />
<img class='img' src='assets/images/france/france-tower.jpg' />
<img class='img' src='assets/images/france/france-town.jpg' />
</div>
<p class="location-desc">
......
src/app/header/header.component.css
View file @ e5f38b8b
......@@ -11,9 +11,12 @@ h3{
text-align: center;
}
.btn{
margin-top: 30px;
margin-left: 10px
.location-button{
margin: 0px 3px;
margin: 0px 3px;
text-decoration: none;
border: none;
border-radius: 3px;
}
.btnMenu{
......
src/app/header/header.component.html
View file @ e5f38b8b
<div class='header'>
<div class='btnMenu'>
<button [routerLink]="['/england']">England</button>
<button [routerLink]="['/france']">France</button>
<button [routerLink]="['/greece']">Greece</button>
<button [routerLink]="['/spain']">Spain</button>
<button class="location-button" [routerLink]="['/england']">England</button>
<button class="location-button" [routerLink]="['/france']">France</button>
<button class="location-button" [routerLink]="['/greece']">Greece</button>
<button class="location-button" [routerLink]="['/spain']">Spain</button>
</div>
<span class='account'>
<i class="fa fa-user" [routerLink]="['/account']" ></i>
......
src/polyfills.ts
View file @ e5f38b8b
/***************************************************************************************************
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
*/
import '@angular/localize/init';
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
......
src/styles.css
View file @ e5f38b8b
......@@ -2,7 +2,7 @@
width: 100%;
}
.location-component-container{
.location-component-container {
display: flex;
flex-direction: column;
align-items: center;
......@@ -16,7 +16,27 @@
padding: 5px;
}
.location-desc{
.location-desc {
width: 80%;
margin-top: 20px;
}
.carousel-cell {
height: auto;
width: 100%;
}
::ng-deep .carousel-item {
display: block !important;
position: absolute;
transform: translateY(100%);
opacity: 0;
transition:all 1s;
}
::ng-deep .carousel-item.active {
position: relative;
transform: translateY(0);
opacity: 1;
top: 0;
}
\ No newline at end of file
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