File

src/app/pages/settings/organization/organization.component.ts

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector app-organization
styleUrls ./organization.component.scss
templateUrl ./organization.component.html

Index

Properties
Methods
Accessors

Constructor

constructor(formBuilder: FormBuilder)
Parameters :
Name Type Optional
formBuilder FormBuilder No

Methods

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

Properties

matcher
Type : CustomErrorStateMatcher
Default value : new CustomErrorStateMatcher()
organizationForm
Type : FormGroup
submitted
Type : boolean
Default value : false

Accessors

organizationFormStub
getorganizationFormStub()
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomErrorStateMatcher } from '@app/_helpers';

@Component({
  selector: 'app-organization',
  templateUrl: './organization.component.html',
  styleUrls: ['./organization.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OrganizationComponent implements OnInit {
  organizationForm: FormGroup;
  submitted: boolean = false;
  matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.organizationForm = this.formBuilder.group({
      disbursement: ['', Validators.required],
      transfer: '',
      countryCode: ['', Validators.required],
    });
  }

  get organizationFormStub(): any {
    return this.organizationForm.controls;
  }

  onSubmit(): void {
    this.submitted = true;
    if (this.organizationForm.invalid || !confirm('Set organization information?')) {
      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="/settings">Settings</a></li>
          <li class="breadcrumb-item active" aria-current="page">Organization Settings</li>
        </ol>
      </nav>
      <div class="col-md-6 center-body">
        <div class="card">
          <mat-card-title class="card-header text-center">
            DEFAULT ORGANISATION SETTINGS
          </mat-card-title>
          <div class="card-body">
            <form [formGroup]="organizationForm" (ngSubmit)="onSubmit()">
              <mat-form-field appearance="outline">
                <mat-label>Default Disbursement *</mat-label>
                <input
                  matInput
                  type="text"
                  id="amount"
                  placeholder="Amount"
                  formControlName="disbursement"
                  [errorStateMatcher]="matcher"
                />
                <span matSuffix>RCU</span>
                <mat-error *ngIf="submitted && organizationFormStub.disbursement.errors">
                  Default Disbursement is required.
                </mat-error>
              </mat-form-field>
              <div class="form-group form-check">
                <mat-checkbox id="transferCard" formControlName="transfer"
                  >Require Transfer Card *</mat-checkbox
                >
              </div>
              <mat-form-field appearance="outline">
                <mat-label>Default Country Code *</mat-label>
                <mat-select
                  id="countryCode"
                  formControlName="countryCode"
                  [errorStateMatcher]="matcher"
                >
                  <mat-option value="KE">KE Kenya</mat-option>
                  <mat-option value="US">US United States</mat-option>
                  <mat-option value="ETH">ETH Ethiopia</mat-option>
                  <mat-option value="GER">GER Germany</mat-option>
                  <mat-option value="UG">UG Uganda</mat-option>
                </mat-select>
                <mat-error *ngIf="submitted && organizationFormStub.countryCode.errors">
                  Country Code is required.
                </mat-error> </mat-form-field
              ><br />
              <button mat-raised-button color="primary" type="submit" class="btn btn-primary">
                Submit
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <app-footer appMenuSelection></app-footer>
  </div>
  <!-- ============================================================== -->
  <!-- End Page content -->
  <!-- ============================================================== -->
</div>

./organization.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""