2021-05-10 20:56:20 +02:00
<!doctype html>
< html class = "no-js" lang = "" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "x-ua-compatible" content = "ie=edge" >
< title > CICADA< / title >
< meta name = "description" content = "" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "icon" type = "image/x-icon" href = "../images/favicon.ico" >
< link rel = "stylesheet" href = "../styles/style.css" >
< / head >
< body >
< div class = "navbar navbar-default navbar-fixed-top visible-xs" >
< a href = "../" class = "navbar-brand" > CICADA< / a >
< button type = "button" class = "btn btn-default btn-menu ion-ios-menu" id = "btn-menu" > < / button >
< / div >
< div class = "xs-menu menu" id = "mobile-menu" >
< div id = "book-search-input" role = "search" > < input type = "text" placeholder = "Type to search" > < / div > < compodoc-menu > < / compodoc-menu >
< / div >
< div class = "container-fluid main" >
< div class = "row main" >
< div class = "hidden-xs menu" >
< compodoc-menu mode = "normal" > < / compodoc-menu >
< / div >
<!-- START CONTENT -->
< div class = "content component" >
< div class = "content-data" >
< ol class = "breadcrumb" >
< li > Components< / li >
< li > CreateAccountComponent< / li >
< / ol >
< ul class = "nav nav-tabs" role = "tablist" >
< li class = "active" >
< a href = "#info" role = "tab" id = "info-tab" data-toggle = "tab" data-link = "info" > Info< / a >
< / li >
< li >
< a href = "#source" role = "tab" id = "source-tab" data-toggle = "tab" data-link = "source" > Source< / a >
< / li >
< li >
< a href = "#templateData" role = "tab" id = "templateData-tab" data-toggle = "tab" data-link = "template" > Template< / a >
< / li >
< li >
< a href = "#styleData" role = "tab" id = "styleData-tab" data-toggle = "tab" data-link = "style" > Styles< / a >
< / li >
< li >
< a href = "#tree" role = "tab" id = "tree-tab" data-toggle = "tab" data-link = "dom-tree" > DOM Tree< / a >
< / li >
< / ul >
< div class = "tab-content" >
< div class = "tab-pane fade active in" id = "c-info" > < p class = "comment" >
< h3 > File< / h3 >
< / p >
< p class = "comment" >
< code > src/app/pages/accounts/create-account/create-account.component.ts< / code >
< / p >
< p class = "comment" >
< h3 > Implements< / h3 >
< / p >
< p class = "comment" >
< code > < a href = "https://angular.io/api/core/OnInit" target = "_blank" > OnInit< / a > < / code >
< / p >
< section >
< h3 > Metadata< / h3 >
< table class = "table table-sm table-hover" >
< tbody >
< tr >
< td class = "col-md-3" > changeDetection< / td >
< td class = "col-md-9" > < code > ChangeDetectionStrategy.OnPush< / code > < / td >
< / tr >
< tr >
< td class = "col-md-3" > selector< / td >
< td class = "col-md-9" > < code > app-create-account< / code > < / td >
< / tr >
< tr >
< td class = "col-md-3" > styleUrls< / td >
< td class = "col-md-9" > < code > ./create-account.component.scss< / code > < / td >
< / tr >
< tr >
< td class = "col-md-3" > templateUrl< / td >
< td class = "col-md-9" > < code > ./create-account.component.html< / code > < / td >
< / tr >
< / tbody >
< / table >
< / section >
< section >
< h3 id = "index" > Index< / h3 >
< table class = "table table-sm table-bordered index-table" >
< tbody >
< tr >
< td class = "col-md-4" >
< h6 > < b > Properties< / b > < / h6 >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< ul class = "index-list" >
< li >
< a href = "#accountTypes" > accountTypes< / a >
< / li >
< li >
< a href = "#areaNames" > areaNames< / a >
< / li >
< li >
< a href = "#categories" > categories< / a >
< / li >
< li >
< a href = "#createForm" > createForm< / a >
< / li >
< li >
< a href = "#genders" > genders< / a >
< / li >
< li >
< a href = "#matcher" > matcher< / a >
< / li >
< li >
< a href = "#submitted" > submitted< / a >
< / li >
< / ul >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< h6 > < b > Methods< / b > < / h6 >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< ul class = "index-list" >
< li >
2021-06-14 13:28:53 +02:00
< span class = "modifier" > Async< / span >
2021-05-10 20:56:20 +02:00
< a href = "#ngOnInit" > ngOnInit< / a >
< / li >
< li >
< a href = "#onSubmit" > onSubmit< / a >
< / li >
< / ul >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< h6 > < b > Accessors< / b > < / h6 >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< ul class = "index-list" >
< li >
< a href = "#createFormStub" > createFormStub< / a >
< / li >
< / ul >
< / td >
< / tr >
< / tbody >
< / table >
< / section >
< section >
< h3 id = "constructor" > Constructor< / h3 >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< code > constructor(formBuilder: < a href = "https://angular.io/api/forms/FormBuilder" target = "_blank" > FormBuilder< / a > , locationService: < a href = "../injectables/LocationService.html" > LocationService< / a > , userService: < a href = "../injectables/UserService.html" > UserService< / a > )< / code >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "20" class = "link-to-prism" > src/app/pages/accounts/create-account/create-account.component.ts:20< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< div >
< b > Parameters :< / b >
< table class = "params" >
< thead >
< tr >
< td > Name< / td >
< td > Type< / td >
< td > Optional< / td >
< / tr >
< / thead >
< tbody >
< tr >
< td > formBuilder< / td >
< td >
< code > < a href = "https://angular.io/api/forms/FormBuilder" target = "_blank" > FormBuilder< / a > < / code >
< / td >
< td >
No
< / td >
< / tr >
< tr >
< td > locationService< / td >
< td >
< code > < a href = "../injectables/LocationService.html" target = "_self" > LocationService< / a > < / code >
< / td >
< td >
No
< / td >
< / tr >
< tr >
< td > userService< / td >
< td >
< code > < a href = "../injectables/UserService.html" target = "_self" > UserService< / a > < / code >
< / td >
< td >
No
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / section >
< section >
< h3 id = "methods" >
Methods
< / h3 >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "ngOnInit" > < / a >
< span class = "name" >
< b >
2021-06-14 13:28:53 +02:00
< span class = "modifier" > Async< / span >
2021-05-10 20:56:20 +02:00
ngOnInit
< / b >
< a href = "#ngOnInit" > < span class = "icon ion-ios-link" > < / span > < / a >
< / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-14 13:28:53 +02:00
< span class = "modifier-icon icon ion-ios-reset" > < / span >
< code > ngOnInit()< / code >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "28"
class="link-to-prism">src/app/pages/accounts/create-account/create-account.component.ts:28< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< div class = "io-description" >
2021-06-14 13:28:53 +02:00
< b > Returns : < / b > < code > Promise< void> < / code >
2021-05-10 20:56:20 +02:00
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "onSubmit" > < / a >
< span class = "name" >
< b >
onSubmit
< / b >
< a href = "#onSubmit" > < span class = "icon ion-ios-link" > < / span > < / a >
< / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< code > onSubmit()< / code >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "64"
class="link-to-prism">src/app/pages/accounts/create-account/create-account.component.ts:64< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< div class = "io-description" >
< b > Returns : < / b > < code > < a href = "https://www.typescriptlang.org/docs/handbook/basic-types.html" target = "_blank" > void< / a > < / code >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / section >
< section >
< h3 id = "inputs" >
Properties
< / h3 >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "accountTypes" > < / a >
< span class = "name" >
< b >
accountTypes< / b >
< a href = "#accountTypes" > < span class = "icon ion-ios-link" > < / span > < / a >
< / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< i > Type : < / i > < code > Array< string> < / code >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "19" class = "link-to-prism" > src/app/pages/accounts/create-account/create-account.component.ts:19< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< / tbody >
< / table >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "areaNames" > < / a >
< span class = "name" >
< b >
areaNames< / b >
< a href = "#areaNames" > < span class = "icon ion-ios-link" > < / span > < / a >
< / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< i > Type : < / i > < code > Array< string> < / code >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "18" class = "link-to-prism" > src/app/pages/accounts/create-account/create-account.component.ts:18< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< / tbody >
< / table >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "categories" > < / a >
< span class = "name" >
< b >
categories< / b >
< a href = "#categories" > < span class = "icon ion-ios-link" > < / span > < / a >
< / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< i > Type : < / i > < code > Array< string> < / code >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "17" class = "link-to-prism" > src/app/pages/accounts/create-account/create-account.component.ts:17< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< / tbody >
< / table >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "createForm" > < / a >
< span class = "name" >
< b >
createForm< / b >
< a href = "#createForm" > < span class = "icon ion-ios-link" > < / span > < / a >
< / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< i > Type : < / i > < code > < a href = "https://angular.io/api/forms/FormGroup" target = "_blank" > FormGroup< / a > < / code >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "14" class = "link-to-prism" > src/app/pages/accounts/create-account/create-account.component.ts:14< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< / tbody >
< / table >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "genders" > < / a >
< span class = "name" >
< b >
genders< / b >
< a href = "#genders" > < span class = "icon ion-ios-link" > < / span > < / a >
< / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< i > Type : < / i > < code > Array< string> < / code >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "20" class = "link-to-prism" > src/app/pages/accounts/create-account/create-account.component.ts:20< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< / tbody >
< / table >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "matcher" > < / a >
< span class = "name" >
< b >
matcher< / b >
< a href = "#matcher" > < span class = "icon ion-ios-link" > < / span > < / a >
< / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< i > Type : < / i > < code > < a href = "../classes/CustomErrorStateMatcher.html" target = "_self" > CustomErrorStateMatcher< / a > < / code >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< i > Default value : < / i > < code > new CustomErrorStateMatcher()< / code >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "15" class = "link-to-prism" > src/app/pages/accounts/create-account/create-account.component.ts:15< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< / tbody >
< / table >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "submitted" > < / a >
< span class = "name" >
< b >
submitted< / b >
< a href = "#submitted" > < span class = "icon ion-ios-link" > < / span > < / a >
< / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< i > Type : < / i > < code > < a href = "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target = "_blank" > boolean< / a > < / code >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< i > Default value : < / i > < code > false< / code >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "16" class = "link-to-prism" > src/app/pages/accounts/create-account/create-account.component.ts:16< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< / tbody >
< / table >
< / section >
< section >
< h3 id = "accessors" >
Accessors
< / h3 >
< table class = "table table-sm table-bordered" >
< tbody >
< tr >
< td class = "col-md-4" >
< a name = "createFormStub" > < / a >
< span class = "name" > < b > createFormStub< / b > < a href = "#createFormStub" > < span class = "icon ion-ios-link" > < / span > < / a > < / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
< span class = "accessor" > < b > get< / b > < code > createFormStub()< / code > < / span >
< / td >
< / tr >
< tr >
< td class = "col-md-4" >
2021-06-23 09:18:28 +02:00
< div class = "io-line" > Defined in < a href = "" data-line = "60" class = "link-to-prism" > src/app/pages/accounts/create-account/create-account.component.ts:60< / a > < / div >
2021-05-10 20:56:20 +02:00
< / td >
< / tr >
< / tbody >
< / table >
< / section >
< / div >
< div class = "tab-pane fade tab-source-code" id = "c-source" >
2021-05-11 19:51:48 +02:00
< pre class = "line-numbers compodoc-sourcecode" > < code class = "language-typescript" > import { ChangeDetectionStrategy, Component, OnInit } from ' @angular/core' ;
import { FormBuilder, FormGroup, Validators } from ' @angular/forms' ;
import { LocationService, UserService } from ' @app/_services' ;
import { CustomErrorStateMatcher } from ' @app/_helpers' ;
import { first } from ' rxjs/operators' ;
2021-05-10 20:56:20 +02:00
@Component({
selector: ' app-create-account' ,
templateUrl: ' ./create-account.component.html' ,
styleUrls: [' ./create-account.component.scss' ],
2021-05-11 19:51:48 +02:00
changeDetection: ChangeDetectionStrategy.OnPush,
2021-05-10 20:56:20 +02:00
})
export class CreateAccountComponent implements OnInit {
createForm: FormGroup;
matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
submitted: boolean = false;
2021-06-23 09:18:28 +02:00
categories: Array< string> ;
areaNames: Array< string> ;
2021-05-10 20:56:20 +02:00
accountTypes: Array< string> ;
genders: Array< string> ;
constructor(
private formBuilder: FormBuilder,
private locationService: LocationService,
private userService: UserService
2021-05-11 19:51:48 +02:00
) {}
2021-05-10 20:56:20 +02:00
2021-06-14 13:28:53 +02:00
async ngOnInit(): Promise< void> {
await this.userService.init();
2021-05-10 20:56:20 +02:00
this.createForm = this.formBuilder.group({
accountType: [' ' , Validators.required],
idNumber: [' ' , Validators.required],
phoneNumber: [' ' , Validators.required],
givenName: [' ' , Validators.required],
surname: [' ' , Validators.required],
directoryEntry: [' ' , Validators.required],
location: [' ' , Validators.required],
gender: [' ' , Validators.required],
referrer: [' ' , Validators.required],
2021-05-11 19:51:48 +02:00
businessCategory: [' ' , Validators.required],
2021-05-10 20:56:20 +02:00
});
2021-06-23 09:18:28 +02:00
this.userService.getCategories();
this.userService.categoriesSubject.subscribe((res) = > {
this.categories = Object.keys(res);
});
this.locationService.getAreaNames();
this.locationService.areaNamesSubject.subscribe((res) = > {
this.areaNames = Object.keys(res);
});
2021-05-11 19:51:48 +02:00
this.userService
.getAccountTypes()
.pipe(first())
.subscribe((res) = > (this.accountTypes = res));
this.userService
.getGenders()
.pipe(first())
.subscribe((res) = > (this.genders = res));
2021-05-10 20:56:20 +02:00
}
2021-05-11 19:51:48 +02:00
get createFormStub(): any {
return this.createForm.controls;
}
2021-05-10 20:56:20 +02:00
onSubmit(): void {
this.submitted = true;
2021-05-11 19:51:48 +02:00
if (this.createForm.invalid || !confirm(' Create account?' )) {
return;
}
2021-05-10 20:56:20 +02:00
this.submitted = false;
}
}
< / code > < / pre >
< / div >
< div class = "tab-pane fade " id = "c-templateData" >
< pre class = "line-numbers" > < code class = "language-html" > < !-- Begin page -->
< div class= " wrapper" >
< app-sidebar> < /app-sidebar>
< !-- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
< !-- Start Page Content here -->
< !-- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
< div id= " content" >
< app-topbar> < /app-topbar>
< !-- Start Content-->
< div class= " container-fluid" appMenuSelection>
< nav aria-label= " breadcrumb" >
< ol class= " breadcrumb" >
< li class= " breadcrumb-item" > < a routerLink= " /home" > Home< /a> < /li>
< li class= " breadcrumb-item" > < a routerLink= " /accounts" > Accounts< /a> < /li>
< li class= " breadcrumb-item active" aria-current= " page" > Create Account< /li>
< /ol>
< /nav>
< div class= " card" >
2021-06-15 18:37:33 +02:00
< mat-card-title class= " card-header text-center" > CREATE A USER ACCOUNT < /mat-card-title>
2021-05-10 20:56:20 +02:00
< div class= " card-body" >
< form class= " row form-inline" [formGroup]= " createForm" (ngSubmit)= " onSubmit()" >
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> Account Type: < /mat-label>
2021-06-15 18:37:33 +02:00
< mat-select
id= " accountType"
formControlName= " accountType"
[errorStateMatcher]= " matcher"
>
2021-05-10 20:56:20 +02:00
< mat-option *ngFor= " let accountType of accountTypes" [value]= " accountType" >
2021-06-15 18:37:33 +02:00
{{ accountType | uppercase }}
2021-05-10 20:56:20 +02:00
< /mat-option>
< /mat-select>
2021-06-15 18:37:33 +02:00
< mat-error *ngIf= " submitted & & createFormStub.accountType.errors"
> Account type is required.< /mat-error
> < /mat-form-field
> < br />
2021-05-10 20:56:20 +02:00
< /div>
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> ID Number: < /mat-label>
2021-06-15 18:37:33 +02:00
< input
matInput
type= " text"
id= " idNumber"
placeholder= " ID Number"
formControlName= " idNumber"
[errorStateMatcher]= " matcher"
/>
< mat-error *ngIf= " submitted & & createFormStub.idNumber.errors"
> ID Number is required.< /mat-error
>
2021-05-10 20:56:20 +02:00
< /mat-form-field>
< /div>
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> Phone Number: < /mat-label>
2021-06-15 18:37:33 +02:00
< input
matInput
type= " text"
id= " phoneNumber"
placeholder= " Phone Number"
formControlName= " phoneNumber"
[errorStateMatcher]= " matcher"
/>
< mat-error *ngIf= " submitted & & createFormStub.phoneNumber.errors"
> Phone Number is required.< /mat-error
> < /mat-form-field
> < br />
2021-05-10 20:56:20 +02:00
< /div>
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> Given Name(s):* < /mat-label>
2021-06-15 18:37:33 +02:00
< input
matInput
type= " text"
id= " givenNames"
placeholder= " Given Names"
formControlName= " givenName"
[errorStateMatcher]= " matcher"
/>
< mat-error *ngIf= " submitted & & createFormStub.givenName.errors"
> Given Names are required.< /mat-error
> < /mat-form-field
> < br />
2021-05-10 20:56:20 +02:00
< /div>
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> Family/Surname: < /mat-label>
2021-06-15 18:37:33 +02:00
< input
matInput
type= " text"
id= " surname"
placeholder= " Surname"
formControlName= " surname"
[errorStateMatcher]= " matcher"
/>
< mat-error *ngIf= " submitted & & createFormStub.surname.errors"
> Surname is required.< /mat-error
> < /mat-form-field
> < br />
2021-05-10 20:56:20 +02:00
< /div>
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> Directory Entry: < /mat-label>
2021-06-15 18:37:33 +02:00
< input
matInput
type= " text"
id= " directoryEntry"
placeholder= " Directory Entry"
formControlName= " directoryEntry"
[errorStateMatcher]= " matcher"
/>
< mat-error *ngIf= " submitted & & createFormStub.directoryEntry.errors"
> Directory Entry is required.< /mat-error
> < /mat-form-field
> < br />
2021-05-10 20:56:20 +02:00
< /div>
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> Location: < /mat-label>
< mat-select id= " location" formControlName= " location" [errorStateMatcher]= " matcher" >
< mat-option *ngFor= " let area of areaNames" [value]= " area" >
2021-06-15 18:37:33 +02:00
{{ area | uppercase }}
2021-05-10 20:56:20 +02:00
< /mat-option>
< /mat-select>
2021-06-15 18:37:33 +02:00
< mat-error *ngIf= " submitted & & createFormStub.location.errors"
> Location is required.< /mat-error
> < /mat-form-field
> < br />
2021-05-10 20:56:20 +02:00
< /div>
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> Gender: < /mat-label>
< mat-select id= " gender" formControlName= " gender" [errorStateMatcher]= " matcher" >
< mat-option *ngFor= " let gender of genders" [value]= " gender" >
2021-06-15 18:37:33 +02:00
{{ gender | uppercase }}
2021-05-10 20:56:20 +02:00
< /mat-option>
< /mat-select>
2021-06-15 18:37:33 +02:00
< mat-error *ngIf= " submitted & & createFormStub.gender.errors"
> Gender is required.< /mat-error
> < /mat-form-field
> < br />
2021-05-10 20:56:20 +02:00
< /div>
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> Referrer Phone Number: < /mat-label>
2021-06-15 18:37:33 +02:00
< input
matInput
type= " text"
id= " referredBy"
placeholder= " Reffered By"
formControlName= " referrer"
[errorStateMatcher]= " matcher"
/>
< mat-error *ngIf= " submitted & & createFormStub.referrer.errors"
> Referrer is required.< /mat-error
> < /mat-form-field
> < br />
2021-05-10 20:56:20 +02:00
< /div>
< div class= " col-md-6 col-lg-4" >
< mat-form-field appearance= " outline" >
< mat-label> Business Category: < /mat-label>
2021-06-15 18:37:33 +02:00
< mat-select
id= " businessCategory"
formControlName= " businessCategory"
[errorStateMatcher]= " matcher"
>
2021-05-10 20:56:20 +02:00
< mat-option *ngFor= " let category of categories" [value]= " category" >
2021-06-15 18:37:33 +02:00
{{ category | titlecase }}
2021-05-10 20:56:20 +02:00
< /mat-option>
< /mat-select>
2021-06-15 18:37:33 +02:00
< mat-error *ngIf= " submitted & & createFormStub.businessCategory.errors"
> Business Category is required.< /mat-error
>
2021-05-10 20:56:20 +02:00
< /mat-form-field>
< /div>
2021-06-15 18:37:33 +02:00
< button
mat-raised-button
color= " primary"
type= " submit"
class= " btn btn-outline-primary ml-3"
(click)= " onSubmit()"
>
Submit
< /button>
2021-05-10 20:56:20 +02:00
< /form>
< /div>
< /div>
< /div>
< app-footer appMenuSelection> < /app-footer>
< /div>
< !-- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
< !-- End Page content -->
< !-- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
< /div>
< / code > < / pre >
< / div >
< div class = "tab-pane fade " id = "c-styleData" >
< p class = "comment" >
< code > ./create-account.component.scss< / code >
< / p >
< pre class = "line-numbers" > < code class = "language-scss" > < / code > < / pre >
< / div >
< div class = "tab-pane fade " id = "c-tree" >
< div id = "tree-container" > < / div >
< div class = "tree-legend" >
< div class = "title" >
< b > Legend< / b >
< / div >
< div >
< div class = "color htmlelement" > < / div > < span > Html element< / span >
< / div >
< div >
< div class = "color component" > < / div > < span > Component< / span >
< / div >
< div >
< div class = "color directive" > < / div > < span > Html element with directive< / span >
< / div >
< / div >
< / div >
< / div >
< script src = "../js/libs/vis.min.js" > < / script >
< script src = "../js/libs/htmlparser.js" > < / script >
< script src = "../js/libs/deep-iterator.js" > < / script >
< script >
2021-06-15 18:37:33 +02:00
var COMPONENT_TEMPLATE = '< div > <!-- Begin page --> < div class = "wrapper" > < app-sidebar > < / app-sidebar > <!-- ============================================================== --> <!-- Start Page Content here --> <!-- ============================================================== --> < div id = "content" > < app-topbar > < / app-topbar > <!-- Start Content --> < div class = "container-fluid" appMenuSelection > < nav aria-label = "breadcrumb" > < ol class = "breadcrumb" > < li class = "breadcrumb-item" > < a routerLink = "/home" > Home< / a > < / li > < li class = "breadcrumb-item" > < a routerLink = "/accounts" > Accounts< / a > < / li > < li class = "breadcrumb-item active" aria-current = "page" > Create Account< / li > < / ol > < / nav > < div class = "card" > < mat-card-title class = "card-header text-center" > CREATE A USER ACCOUNT < / mat-card-title > < div class = "card-body" > < form class = "row form-inline" [ formGroup ] = " createForm " ( ngSubmit ) = " onSubmit ( ) " > < div class = "col-md-6 col-lg-4" > < mat-form-field appearance = "outline" > < mat-label > Account Type: < / mat-label > < mat-select id = "accountType" formControlName = "accountType" [ errorStateMatcher ] = " matcher " > < mat-option * ngFor = "let accountType of accountTypes" [ value ] = " accountType " > {{ accountType | uppercase }} < / mat-option > < / mat-select > < mat-error * ngIf = "submitted && createFormStub.accountType.errors" > Account type is required.< / mat-error > < / mat-form-field > < br / > < / div > < div class = "col-md-6 col-lg-4" > < mat-form-field appearance = "outline" > < mat-label > ID Number: < / mat-label > < input matInput type = "text" id = "idNumber" placeholder = "ID Number" formControlName = "idNumber" [ errorStateMatcher ] = " matcher " / > < mat-error * ngIf = "submitted && createFormStub.idNumber.errors" > ID Number is required.< / mat-error > < / mat-form-field > < / div > < div class = "col-md-6 col-lg-4" > < mat-form-field appearance = "outline" > < mat-label > Phone Number: < / mat-label > < input matInput type = "text" id = "phoneNumber" placeholder = "Phone Number" formControlName = "phoneNumber" [ errorStateMatcher ] = " matcher " / > < mat-error * ngIf = "submitted && createFormStub.phoneNumber.errors" > Phone Number is required.< / mat-error > < / mat-form-field > < br / > < / div > < div class = "col-md-6 col-lg-4" > < mat-form-field appearance = "outline" > < mat-label > Given Name(s):* < / mat-label > < input matInput type = "text" id = "givenNames" placeholder = "Given Names" formControlName = "givenName" [ errorStateMatcher ] = " matcher " / > < mat-error * ngIf = "submitted && createFormStub.givenName.errors" > Given Names are required.< / mat-error > < / mat-form-field > < br / > < / div > < div class = "col-md-6 col-lg-4" > < mat-form-field appearance = "outline" > < mat-label > Family/Surname: < / mat-label > < input matInput type = "text" id = "surname" placeholder = "Surname" formControlName = "surname" [ errorStateMatcher ] = " matcher " / > < mat-error * ngIf = "submitted && createFormStub.surname.errors" > Surname is required.< /mat-error
2021-05-11 19:51:48 +02:00
var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
2021-05-10 20:56:20 +02:00
var ACTUAL_COMPONENT = {'name': 'CreateAccountComponent'};
< / script >
< script src = "../js/tree.js" > < / script >
< / div > < div class = "search-results" >
< div class = "has-results" >
< h1 class = "search-results-title" > < span class = 'search-results-count' > < / span > result-matching "< span class = 'search-query' > < / span > "< / h1 >
< ul class = "search-results-list" > < / ul >
< / div >
< div class = "no-results" >
< h1 class = "search-results-title" > No results matching "< span class = 'search-query' > < / span > "< / h1 >
< / div >
< / div >
< / div >
<!-- END CONTENT -->
< / div >
< / div >
< script >
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
var COMPODOC_CURRENT_PAGE_URL = 'CreateAccountComponent.html';
var MAX_SEARCH_RESULTS = 15;
< / script >
< script src = "../js/libs/custom-elements.min.js" > < / script >
< script src = "../js/libs/lit-html.js" > < / script >
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
< script src = "../js/libs/custom-elements-es5-adapter.js" charset = "utf-8" defer > < / script >
< script src = "../js/menu-wc.js" defer > < / script >
< script src = "../js/libs/bootstrap-native.js" > < / script >
< script src = "../js/libs/es6-shim.min.js" > < / script >
< script src = "../js/libs/EventDispatcher.js" > < / script >
< script src = "../js/libs/promise.min.js" > < / script >
< script src = "../js/libs/zepto.min.js" > < / script >
< script src = "../js/compodoc.js" > < / script >
< script src = "../js/tabs.js" > < / script >
< script src = "../js/menu.js" > < / script >
< script src = "../js/libs/clipboard.min.js" > < / script >
< script src = "../js/libs/prism.js" > < / script >
< script src = "../js/sourceCode.js" > < / script >
< script src = "../js/search/search.js" > < / script >
< script src = "../js/search/lunr.min.js" > < / script >
< script src = "../js/search/search-lunr.js" > < / script >
< script src = "../js/search/search_index.js" > < / script >
< script src = "../js/lazy-load-graphs.js" > < / script >
< / body >
< / html >
