### File

`src/data-table/data-table.component.ts`

### Implements

`OnInit`

### Metadata

selector | `rb-data-table`
template |
    <fieldset *ngIf="Status['READY'] === status" class="rb-data-table rb-data-table-{{ group.code }}" [formGroup]="formGroup"
      [ngClass]="{ 'read-only': readOnly }">
      <legend>
        <span [ngClass]="{ 'required-control': group.isRequired() && !readOnly }">
          {{ group.description }}
        </span>
      </legend>

      <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover">
          <thead>
            <tr>
              <th class="text-center" *ngFor="let question of group.questions[0]">
                <span [ngClass]="{ 'required-control': question.isRequired() && !readOnly }">
                  {{ question.description }}
                </span>
              </th>
              <th class="text-center" *ngIf="!readOnly">
                {{ 'ACTION' | translate }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr [formGroup]="newFormGroup" *ngIf="!readOnly">
              <td *ngFor="let question of group.questions[0]">
                <ng-container [ngSwitch]="question.type">

                  <ng-template ngSwitchCase="checkbox">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" [name]="question.name" [formControlName]="question.name" />
                        {{ question.description }}
                      </label>
                      <rb-validation-message [validations]="question.validations"
                                             [control]="newFormGroup.get(question.name)"
                                             [submitted]="submitted">
                      </rb-validation-message>
                    </div> <!--/.checkbox-->
                  </ng-template> <!--/checkbox-->

                  <ng-template ngSwitchCase="radio">
                    <div class="radio" *ngFor="let option of question.options">
                      <label>
                        <input type="radio" [name]="question.name" [value]="option" [formControlName]="question.name" />
                        {{ option }}
                      </label>
                    </div> <!--/.radio-->
                    <rb-validation-message [validations]="question.validations"
                                           [control]="newFormGroup.get(question.name)"
                                           [submitted]="submitted">
                    </rb-validation-message>
                  </ng-template> <!--/radio-->

                  <ng-template ngSwitchCase="select">
                    <select [id]="question.name" class="form-control" [name]="question.name" #selectQuestion
                          [formControlName]="question.name"
                          (change)="onChangeOptionSelect(selectQuestion, newFormGroup.get(question.name), question)">
                      <option disabled [value]="null">
                        {{ question.placeholder ? question.placeholder : '' }}
                      </option>
                      <option *ngFor="let option of question.options" [value]="option['value'] || option">
                        {{ option['description'] || option }}
                      </option>
                    </select>
                    <ng-container *ngIf="question.editableOption && question.editableOption.length">
                      <input [hidden]="question.editableOption !== selectQuestion.value"
                             type="text" [id]="question.name" class="form-control editable-option" [name]="question.name"
                             [formControlName]="question.name" />
                    </ng-container>
                    <rb-validation-message [validations]="question.validations"
                                           [control]="newFormGroup.get(question.name)"
                                           [submitted]="submitted">
                    </rb-validation-message>
                  </ng-template> <!--/select-->

                  <ng-template ngSwitchCase="textarea">
                    <textarea [id]="question.name" class="form-control" [name]="question.name" rows="5"
                              placeholder="{{ question.placeholder ? question.placeholder : '' }}"
                              [formControlName]="question.name">
                    </textarea>
                    <rb-validation-message [validations]="question.validations"
                                           [control]="newFormGroup.get(question.name)"
                                           [submitted]="submitted">
                    </rb-validation-message>
                  </ng-template> <!--/textarea-->

                  <ng-template ngSwitchCase="text" ngSwitchDefault>
                    <input type="text" [id]="question.name" class="form-control" [name]="question.name"
                            placeholder="{{ question.placeholder ? question.placeholder : '' }}"
                            [formControlName]="question.name" [mask]="question.mask" />
                    <rb-validation-message [validations]="question.validations"
                                           [control]="newFormGroup.get(question.name)"
                                           [submitted]="submitted">
                    </rb-validation-message>
                  </ng-template> <!--/text-->

                </ng-container> <!--/ngSwitch-questionType-->
              </td>
              <td class="text-center">
                <button class="btn btn-default btn-add-data" (click)="addData()">
                  <i class="rb-ico rb-ico-add" aria-hidden="true"></i>
                  {{ 'ADD' | translate }}
                </button>
              </td>
            </tr>
            <tr class="data" *ngFor="let data of formArray?.value; let indexData = index">
              <td *ngFor="let key of getKeysFromObject(data)" [class.text-center]="isCheckbox(getQuestionByName(key))">
                <ng-container [ngSwitch]="getQuestionByName(key).type">
                  <ng-template ngSwitchCase="checkbox">
                    <i class="rb-ico rb-ico-square rb-ico-{{ data[key] ? 'checked' : 'unchecked' }}" aria-hidden="true"></i>
                  </ng-template>

                  <ng-template ngSwitchDefault>
                    {{ data[key] || 'NOT_INFORMED' | translate }}
                  </ng-template>
                </ng-container>
              </td>
              <td class="text-center" *ngIf="!readOnly">
                <button class="btn btn-default btn-remove-data" (click)="removeData(indexData)">
                  <i class="rb-ico rb-ico-remove" aria-hidden="true"></i>
                  {{ 'REMOVE' | translate }}
                </button>
              </td>
            </tr>
            <tr *ngIf="readOnly && !formArray?.value.length">
              <td [attr.colspan]="group.questions[0].length" class="text-center">{{ 'NO_REGISTERS' | translate }}</td>
            </tr>
          </tbody>
        </table>
      </div> <!--/.table-responsive-->
      <rb-validation-message [validations]="group.validations"
                             [control]="formArray"
                             [submitted]="formGroupSubmitted">
      </rb-validation-message>
    </fieldset>

### Index

###### Properties
Public formArray Public newFormGroup Public status Public Status Public submitted
###### Methods
Public addData Public getKeysFromObject Public getQuestionByName Public isCheckbox Public onChangeOptionSelect Public removeData Public resetForms
###### Inputs
formGroup formGroupSubmitted group readOnly
###### Outputs
error ready

### Inputs

`formGroup` | Type: `FormGroup`
Defined in src/data-table/data-table.component.ts:157

`formGroupSubmitted` | Type: `boolean` Default value: `false`
Defined in src/data-table/data-table.component.ts:159

`group` | Type: `DataTable`
Defined in src/data-table/data-table.component.ts:158

`readOnly` | Type: `boolean` Default value: `false`
Defined in src/data-table/data-table.component.ts:160

### Outputs

`error` | `$event` type: `EventEmitter<Error>`
Defined in src/data-table/data-table.component.ts:162

`ready` | `$event` type: `EventEmitter<boolean>`
Defined in src/data-table/data-table.component.ts:163

### Methods

Public addData
`addData()`
Defined in src/data-table/data-table.component.ts:192
Returns : `void`

Public getKeysFromObject
`getKeysFromObject(object: Object)`
Defined in src/data-table/data-table.component.ts:188
Parameters :
Name | Type | Optional | Description
object | `Object` |  |
Returns : `string[]`

Public getQuestionByName
`getQuestionByName(name: string)`
Defined in src/data-table/data-table.component.ts:212
Parameters :
Name | Type | Optional | Description
name | `string` |  |
Returns : `Question<any>`

Public isCheckbox
`isCheckbox(question: Question)`
Defined in src/data-table/data-table.component.ts:222
Parameters :
Name | Type | Optional | Description
question | `Question<any>` |  |
Returns : `boolean`

Public onChangeOptionSelect
`onChangeOptionSelect(htmlFormControl: HTMLInputElement, formControl: FormControl, question: Select)`
Defined in src/data-table/data-table.component.ts:184
Parameters :
Name | Type | Optional | Description
htmlFormControl | `HTMLInputElement` |  |
formControl | `FormControl` |  |
question | `Select` |  |
Returns : `void`

Public removeData
`removeData(index: number)`
Defined in src/data-table/data-table.component.ts:203
Parameters :
Name | Type | Optional | Description
index | `number` |  |
Returns : `void`

Public resetForms
`resetForms()`
Defined in src/data-table/data-table.component.ts:207
Returns : `void`

### Properties

Public formArray
`formArray: `FormArray``
Type : `FormArray`
Defined in src/data-table/data-table.component.ts:153

Public newFormGroup
`newFormGroup: `FormGroup``
Type : `FormGroup`
Defined in src/data-table/data-table.component.ts:154

Public status
`status: `Status``
Type : `Status`
Defined in src/data-table/data-table.component.ts:226

Public Status
`Status: `Object``
Type : `Object`
Default value : `Status`
Defined in src/data-table/data-table.component.ts:151

Public submitted
`submitted: `boolean``
Type : `boolean`
Default value : `false`
Defined in src/data-table/data-table.component.ts:155

    import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
    import { FormGroup, FormArray, FormControl } from '@angular/forms';

    import { Status } from '..';
    import { Select, SelectService, Question, QuestionType } from '../question';
    import { Group, DataTable } from '../group';
    import { ReactiveFormsFactory } from '../factory';

    @Component({
      selector: 'rb-data-table',
      template: `
        <fieldset *ngIf="Status['READY'] === status" class="rb-data-table rb-data-table-{{ group.code }}" [formGroup]="formGroup"
          [ngClass]="{ 'read-only': readOnly }">
          <legend>
            <span [ngClass]="{ 'required-control': group.isRequired() && !readOnly }">
              {{ group.description }}
            </span>
          </legend>

          <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover">
              <thead>
                <tr>
                  <th class="text-center" *ngFor="let question of group.questions[0]">
                    <span [ngClass]="{ 'required-control': question.isRequired() && !readOnly }">
                      {{ question.description }}
                    </span>
                  </th>
                  <th class="text-center" *ngIf="!readOnly">
                    {{ 'ACTION' | translate }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr [formGroup]="newFormGroup" *ngIf="!readOnly">
                  <td *ngFor="let question of group.questions[0]">
                    <ng-container [ngSwitch]="question.type">

                      <ng-template ngSwitchCase="checkbox">
                        <div class="checkbox">
                          <label>
                            <input type="checkbox" [name]="question.name" [formControlName]="question.name" />
                            {{ question.description }}
                          </label>
                          <rb-validation-message [validations]="question.validations"
                                                 [control]="newFormGroup.get(question.name)"
                                                 [submitted]="submitted">
                          </rb-validation-message>
                        </div> <!--/.checkbox-->
                      </ng-template> <!--/checkbox-->

                      <ng-template ngSwitchCase="radio">
                        <div class="radio" *ngFor="let option of question.options">
                          <label>
                            <input type="radio" [name]="question.name" [value]="option" [formControlName]="question.name" />
                            {{ option }}
                          </label>
                        </div> <!--/.radio-->
                        <rb-validation-message [validations]="question.validations"
                                               [control]="newFormGroup.get(question.name)"
                                               [submitted]="submitted">
                        </rb-validation-message>
                      </ng-template> <!--/radio-->

                      <ng-template ngSwitchCase="select">
                        <select [id]="question.name" class="form-control" [name]="question.name" #selectQuestion
                              [formControlName]="question.name"
                              (change)="onChangeOptionSelect(selectQuestion, newFormGroup.get(question.name), question)">
                          <option disabled [value]="null">
                            {{ question.placeholder ? question.placeholder : '' }}
                          </option>
                          <option *ngFor="let option of question.options" [value]="option['value'] || option">
                            {{ option['description'] || option }}
                          </option>
                        </select>
                        <ng-container *ngIf="question.editableOption && question.editableOption.length">
                          <input [hidden]="question.editableOption !== selectQuestion.value"
                                 type="text" [id]="question.name" class="form-control editable-option" [name]="question.name"
                                 [formControlName]="question.name" />
                        </ng-container>
                        <rb-validation-message [validations]="question.validations"
                                               [control]="newFormGroup.get(question.name)"
                                               [submitted]="submitted">
                        </rb-validation-message>
                      </ng-template> <!--/select-->

                      <ng-template ngSwitchCase="textarea">
                        <textarea [id]="question.name" class="form-control" [name]="question.name" rows="5"
                                  placeholder="{{ question.placeholder ? question.placeholder : '' }}"
                                  [formControlName]="question.name">
                        </textarea>
                        <rb-validation-message [validations]="question.validations"
                                               [control]="newFormGroup.get(question.name)"
                                               [submitted]="submitted">
                        </rb-validation-message>
                      </ng-template> <!--/textarea-->

                      <ng-template ngSwitchCase="text" ngSwitchDefault>
                        <input type="text" [id]="question.name" class="form-control" [name]="question.name"
                                placeholder="{{ question.placeholder ? question.placeholder : '' }}"
                                [formControlName]="question.name" [mask]="question.mask" />
                        <rb-validation-message [validations]="question.validations"
                                               [control]="newFormGroup.get(question.name)"
                                               [submitted]="submitted">
                        </rb-validation-message>
                      </ng-template> <!--/text-->

                    </ng-container> <!--/ngSwitch-questionType-->
                  </td>
                  <td class="text-center">
                    <button class="btn btn-default btn-add-data" (click)="addData()">
                      <i class="rb-ico rb-ico-add" aria-hidden="true"></i>
                      {{ 'ADD' | translate }}
                    </button>
                  </td>
                </tr>
                <tr class="data" *ngFor="let data of formArray?.value; let indexData = index">
                  <td *ngFor="let key of getKeysFromObject(data)" [class.text-center]="isCheckbox(getQuestionByName(key))">
                    <ng-container [ngSwitch]="getQuestionByName(key).type">
                      <ng-template ngSwitchCase="checkbox">
                        <i class="rb-ico rb-ico-square rb-ico-{{ data[key] ? 'checked' : 'unchecked' }}" aria-hidden="true"></i>
                      </ng-template>

                      <ng-template ngSwitchDefault>
                        {{ data[key] || 'NOT_INFORMED' | translate }}
                      </ng-template>
                    </ng-container>
                  </td>
                  <td class="text-center" *ngIf="!readOnly">
                    <button class="btn btn-default btn-remove-data" (click)="removeData(indexData)">
                      <i class="rb-ico rb-ico-remove" aria-hidden="true"></i>
                      {{ 'REMOVE' | translate }}
                    </button>
                  </td>
                </tr>
                <tr *ngIf="readOnly && !formArray?.value.length">
                  <td [attr.colspan]="group.questions[0].length" class="text-center">{{ 'NO_REGISTERS' | translate }}</td>
                </tr>
              </tbody>
            </table>
          </div> <!--/.table-responsive-->
          <rb-validation-message [validations]="group.validations"
                                 [control]="formArray"
                                 [submitted]="formGroupSubmitted">
          </rb-validation-message>
        </fieldset>
      `,
    })
    export class DataTableComponent implements OnInit {

      public readonly Status: Object = Status;

      public formArray: FormArray;
      public newFormGroup: FormGroup;
      public submitted: boolean = false;

      @Input() public formGroup: FormGroup;
      @Input() public group: DataTable;
      @Input() public formGroupSubmitted: boolean = false;
      @Input() public readOnly: boolean = false;

      @Output() public error: EventEmitter<Error> = new EventEmitter();
      @Output() public ready: EventEmitter<boolean> = new EventEmitter();

      private _status: Status;

      public ngOnInit(): void {
        this.formArray = <FormArray>this.formGroup.get(this.group.code);

        if (this.formArray) {
          this._status = Status.LOADING;
          this.load()
            .then(() => {
              this._status = Status.READY;
              this.ready.emit();
            })
            .catch((error: Error) => {
              this._status = Status.ERROR;
              this.error.emit(error);
            });
        }
      }

      public onChangeOptionSelect(htmlFormControl: HTMLInputElement, formControl: FormControl, question: Select): void {
        SelectService.onChangeOption(htmlFormControl, formControl, question);
      }

      public getKeysFromObject(object: Object): string[] {
        return Object.keys(object);
      }

      public addData(): void {
        this.submitted = true;

        if (!this.newFormGroup.valid) {
          return;
        }

        this.formArray.push(Object.assign(new FormGroup({}), this.newFormGroup));
        this.resetForms();
      }

      public removeData(index: number): void {
        this.formArray.removeAt(index);
      }

      public resetForms(): void {
        this.newFormGroup.reset();
        this.submitted = false;
      }

      public getQuestionByName(name: string): Question<any> {
        for (const question of this.group.questions[0]) {
          if (name === question.name) {
            return question;
          }
        }

        return null;
      }

      public isCheckbox(question: Question<any>): boolean {
        return QuestionType.CHECKBOX === question.type;
      }

      public get status(): Status {
        return this._status;
      }

      private async load(): Promise<void> {
        return new Promise<void>(async (resolve: () => void, reject: (error: Error) => void) => {
          try {
            this.newFormGroup = await ReactiveFormsFactory.createFormGroupFromQuestions(this.group.questions[0], false);

            resolve();
          } catch (error) {
            reject(error);
          }
        });
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""