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
Methods
Accessors

Constructor

constructor(formBuilder: FormBuilder, locationService: LocationService, userService: UserService)
Parameters :
Name Type Optional
formBuilder FormBuilder No
locationService LocationService No
userService UserService No

Methods

ngOnInit
ngOnInit()
Returns : void
onSubmit
onSubmit()
Returns : void

Properties

accountTypes
Type : Array<string>
areaNames
Type : Array<AreaName>
categories
Type : Array<Category>
createForm
Type : FormGroup
genders
Type : Array<string>
matcher
Type : CustomErrorStateMatcher
Default value : new CustomErrorStateMatcher()
submitted
Type : boolean
Default value : false

Accessors

createFormStub
getcreateFormStub()
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';
import {AreaName, Category} from '@app/_models';

@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<Category>;
  areaNames: Array<AreaName>;
  accountTypes: Array<string>;
  genders: Array<string>;

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

  ngOnInit(): void {
    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().pipe(first()).subscribe(res => this.categories = res);
    this.locationService.getAreaNames().pipe(first()).subscribe(res => this.areaNames = 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 ""