### File

`src/app/pages/accounts/create-account/create-account.component.ts`

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `app-create-account`
styleUrls | `./create-account.component.scss`
templateUrl | `./create-account.component.html`

### Index

###### Properties
accountTypes areaNames categories createForm genders matcher submitted
###### Methods
Async ngOnInit onSubmit
###### Accessors
createFormStub

### Constructor

`constructor(formBuilder: FormBuilder, locationService: LocationService, userService: UserService)`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:20
Parameters :
Name | Type | Optional
formBuilder | `FormBuilder` | No
locationService | `LocationService` | No
userService | `UserService` | No

### Methods

Async ngOnInit
`ngOnInit()`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:28
Returns : `Promise<void>`

onSubmit
`onSubmit()`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:64
Returns : `void`

### Properties

accountTypes
Type : `Array<string>`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:19

areaNames
Type : `Array<string>`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:18

categories
Type : `Array<string>`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:17

createForm
Type : `FormGroup`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:14

genders
Type : `Array<string>`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:20

matcher
Type : `CustomErrorStateMatcher`
Default value : `new CustomErrorStateMatcher()`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:15

submitted
Type : `boolean`
Default value : `false`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:16

### Accessors

createFormStub
get `createFormStub()`
Defined in src/app/pages/accounts/create-account/create-account.component.ts:60

    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';

    @Component({
      selector: 'app-create-account',
      templateUrl: './create-account.component.html',
      styleUrls: ['./create-account.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class CreateAccountComponent implements OnInit {
      createForm: FormGroup;
      matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
      submitted: boolean = false;
      categories: Array<string>;
      areaNames: Array<string>;
      accountTypes: Array<string>;
      genders: Array<string>;

      constructor(
        private formBuilder: FormBuilder,
        private locationService: LocationService,
        private userService: UserService
      ) {}

      async ngOnInit(): Promise<void> {
        await this.userService.init();
        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],
          businessCategory: ['', Validators.required],
        });
        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);
        });
        this.userService
          .getAccountTypes()
          .pipe(first())
          .subscribe((res) => (this.accountTypes = res));
        this.userService
          .getGenders()
          .pipe(first())
          .subscribe((res) => (this.genders = res));
      }

      get createFormStub(): any {
        return this.createForm.controls;
      }

      onSubmit(): void {
        this.submitted = true;
        if (this.createForm.invalid || !confirm('Create account?')) {
          return;
        }
        this.submitted = false;
      }
    }

    <!-- 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
                    > </mat-form-field
                  ><br />
                </div>

                <div class="col-md-6 col-lg-4">
                  <mat-form-field appearance="outline">
                    <mat-label>Directory Entry: </mat-label>
                    <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 />
                </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">
                        {{ area | uppercase }}
                      </mat-option>
                    </mat-select>
                    <mat-error *ngIf="submitted && createFormStub.location.errors"
                      >Location is required.</mat-error
                    > </mat-form-field
                  ><br />
                </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">
                        {{ gender | uppercase }}
                      </mat-option>
                    </mat-select>
                    <mat-error *ngIf="submitted && createFormStub.gender.errors"
                      >Gender is required.</mat-error
                    > </mat-form-field
                  ><br />
                </div>

                <div class="col-md-6 col-lg-4">
                  <mat-form-field appearance="outline">
                    <mat-label>Referrer Phone Number: </mat-label>
                    <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 />
                </div>

                <div class="col-md-6 col-lg-4">
                  <mat-form-field appearance="outline">
                    <mat-label>Business Category: </mat-label>
                    <mat-select
                      id="businessCategory"
                      formControlName="businessCategory"
                      [errorStateMatcher]="matcher"
                    >
                      <mat-option *ngFor="let category of categories" [value]="category">
                        {{ category | titlecase }}
                      </mat-option>
                    </mat-select>
                    <mat-error *ngIf="submitted && createFormStub.businessCategory.errors"
                      >Business Category is required.</mat-error
                    >
                  </mat-form-field>
                </div>

                <button
                  mat-raised-button
                  color="primary"
                  type="submit"
                  class="btn btn-outline-primary ml-3"
                  (click)="onSubmit()"
                >
                  Submit
                </button>
              </form>
            </div>
          </div>
        </div>
        <app-footer appMenuSelection></app-footer>
      </div>
      <!-- ============================================================== -->
      <!-- End Page content -->
      <!-- ============================================================== -->
    </div>

`./create-account.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""