# CICADA

### 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

- matcher
- organizationForm
- submitted

###### Methods

- ngOnInit
- onSubmit

###### Accessors

- organizationFormStub

### Constructor

`constructor(formBuilder: FormBuilder)`
Defined in src/app/pages/settings/organization/organization.component.ts:14

Parameters :

Name | Type | Optional
formBuilder | `FormBuilder` | No

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/pages/settings/organization/organization.component.ts:18
Returns : `void`

onSubmit
`onSubmit()`
Defined in src/app/pages/settings/organization/organization.component.ts:30
Returns : `void`

### Properties

matcher
Type : `CustomErrorStateMatcher`
Default value : `new CustomErrorStateMatcher()`
Defined in src/app/pages/settings/organization/organization.component.ts:14

organizationForm
Type : `FormGroup`
Defined in src/app/pages/settings/organization/organization.component.ts:12

submitted
Type : `boolean`
Default value : `false`
Defined in src/app/pages/settings/organization/organization.component.ts:13

### Accessors

organizationFormStub
get `organizationFormStub()`
Defined in src/app/pages/settings/organization/organization.component.ts:26

    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 ""