moh-common-lib
  1. Components
  2. CheckboxComponent

File

projects/common/lib/components/checkbox/checkbox.component.ts

Description

Checkbox component is a input checkbox

Extends

AbstractFormControl

Implements

OnInit ControlValueAccessor

Example

<common-checkbox #addressChangeChkBx
label='Do you want to opt in?'
errorMessageRequired = 'Opt in should be selected'
(dataChange)="dataChange($event)"
[(data)]='person.hasOpted' [disabled]="isDisabled"
[required]="isrequired">
</common-checkbox>

Metadata

selector common-checkbox
styleUrls ./checkbox.component.scss
templateUrl ./checkbox.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(controlDir: NgControl)
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:40
Parameters :
Name Type Optional
controlDir NgControl No

Inputs

data
Type : boolean
Default value : false
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:32

You can bind to [(data)] OR you can use [(ngModel)] but don't use both.
label
Type : string
Default value : 'Default Checkbox'
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:33
required
Type : boolean
Default value : false
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:34
disabled
Type : boolean
Default value : false
Inherited from AbstractFormControl
Defined in AbstractFormControl:16
errorMessage
Type : ErrorMessage
Inherited from AbstractFormControl
Defined in AbstractFormControl:19
label
Type : string
Inherited from AbstractFormControl
Defined in AbstractFormControl:14

Outputs

dataChange
Type : EventEmitter<boolean>
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:35

Methods

focus
focus()
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:60
Returns : void
ngOnInit
ngOnInit()
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:49
Returns : void
setCheckboxVal
setCheckboxVal(event: boolean)
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:53
Parameters :
Name Type Optional
event boolean No
Returns : void
writeValue
writeValue(value: any)
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:64
Parameters :
Name Type Optional
value any No
Returns : void
ngOnInit
ngOnInit()
Inherited from AbstractFormControl
Defined in AbstractFormControl:27
Returns : void
registerOnChange
registerOnChange(fn: any)
Inherited from AbstractFormControl
Defined in AbstractFormControl:35
Parameters :
Name Type Optional
fn any No
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Inherited from AbstractFormControl
Defined in AbstractFormControl:40
Parameters :
Name Type Optional
fn any No
Returns : void
Protected registerValidation
registerValidation(ngControl: NgControl, fn: ValidationErrors)
Inherited from AbstractFormControl
Defined in AbstractFormControl:68

Register self validating method

Parameters :
Name Type Optional Description
ngControl NgControl No
fn ValidationErrors No

function for validating self
Returns : any
setDisabledState
setDisabledState(isDisabled: boolean)
Inherited from AbstractFormControl
Defined in AbstractFormControl:45
Parameters :
Name Type Optional
isDisabled boolean No
Returns : void
Protected setErrorMsg
setErrorMsg()
Inherited from AbstractFormControl
Defined in AbstractFormControl:49
Returns : void
Private validateLabel
validateLabel()
Inherited from AbstractFormControl
Defined in AbstractFormControl:88
Returns : void
Abstract writeValue
writeValue(value: any)
Inherited from AbstractFormControl
Defined in AbstractFormControl:32
Parameters :
Name Type Optional
value any No
Returns : void

Properties

_defaultErrMsg
Type : ErrorMessage
Default value : { required: `${LabelReplacementTag} is required.`, }
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:38
checkbox
Type : ElementRef
Decorators :
@ViewChild('checkbox')
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:36
Public controlDir
Type : NgControl
Decorators :
@Optional()
@Self()
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:42
defaultErrorMessage
Type : string
Default value : ''
Defined in projects/common/lib/components/checkbox/checkbox.component.ts:27
Abstract _defaultErrMsg
Type : ErrorMessage
Default value : {}
Inherited from AbstractFormControl
Defined in AbstractFormControl:11
_onChange
Default value : () => {...}
Inherited from AbstractFormControl
Defined in AbstractFormControl:23
_onTouched
Default value : () => {...}
Inherited from AbstractFormControl
Defined in AbstractFormControl:24
Public objectId
Type : string
Default value : UUID.UUID()
Inherited from Base
Defined in Base:11

An identifier for parents to keep track of components 

import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, Optional, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { AbstractFormControl } from '../../models/abstract-form-control';
import { ErrorMessage, LabelReplacementTag } from '../../models/error-message.interface';
/**
 * Checkbox component is a input checkbox
 *
 * @example
 *       <common-checkbox #addressChangeChkBx
 *          label='Do you want to opt in?'
 *          errorMessageRequired = 'Opt in should be selected'
 *          (dataChange)="dataChange($event)"
 *           [(data)]='person.hasOpted' [disabled]="isDisabled"
 *          [required]="isrequired">
 *       </common-checkbox>
 *
 * @export
 */


@Component({
  selector: 'common-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent extends AbstractFormControl implements OnInit, ControlValueAccessor {
  defaultErrorMessage: string = '';

  /**
   * You can bind to [(data)] OR you can use [(ngModel)] but don't use both.
   */
  @Input() data: boolean = false;
  @Input() label: string = 'Default Checkbox';
  @Input() required: boolean = false;  // TOBE removed duing MSP stablization - then update MSP to use form control version
  @Output() dataChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  @ViewChild('checkbox') checkbox: ElementRef;

  _defaultErrMsg: ErrorMessage = {
    required: `${LabelReplacementTag} is required.`,
  };

  constructor( @Optional() @Self() public controlDir: NgControl ) {
    super();
    if ( controlDir ) {
      controlDir.valueAccessor = this;
    }
  }

  ngOnInit() {
    super.ngOnInit();
  }

  setCheckboxVal(event: boolean) {
    this.data = event;
    this.dataChange.emit(this.data);
    this._onChange(event);
    this._onTouched();
  }

  focus() {
    this.checkbox.nativeElement.focus();
  }

  writeValue(value: any): void {
    if ( value !== undefined || value === null ) {
      this.data = value;
    }
  }
}


<input #checkbox
      type="checkbox"
      class="input-lg form-check-input"
      name="checkbox_{{objectId}}"
      id="checkbox_{{objectId}}"
      [ngModel]="data"
      (ngModelChange)="setCheckboxVal($event);"
      [disabled]="disabled"
      [required]="required">
<label for="checkbox_{{objectId}}" class="mb-2 pl-3 form-check-label">{{label}}</label>

<common-error-container
  [displayError]="controlDir && !disabled && (controlDir.touched || controlDir.dirty) && controlDir?.errors">
  <div *ngIf="controlDir?.errors?.required">{{_defaultErrMsg.required}}</div>
</common-error-container>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""