form-aurora-stefanini 0.1.0 → 0.1.3

package/src/lib/Components/from-aurora/form-aurora.component.ts

@@ -0,0 +1,725 @@
+import {
+  Component,
+  Injectable,
+  Input,
+  ElementRef,
+  OnInit,
+  Renderer2,
+  ViewChild,
+  OnChanges,
+  SimpleChanges,
+  Output,
+  EventEmitter
+} from '@angular/core';
+import {FormGroup, FormControl, NgForm, Form, Validators} from '@angular/forms';
+import {HttpClient} from '@angular/common/http';
+
+// import moment from 'moment';
+import {NgbDateAdapter, NgbDateParserFormatter, NgbDateStruct, NgbDatepickerI18n} from '@ng-bootstrap/ng-bootstrap';
+import * as moment_ from 'moment';
+import { Fill } from '../../Models/fill';
+import { regexType } from '../../utils/regex';
+import { Company } from '../../Models/company';
+import { Step } from '../../Models/step';
+import { CommonDataService } from '../../services/data.service';
+
+
+
+
+
+const moment = moment_;
+// import { regexType } from "@app/_shared/_util/regex";
+// import { ExternalService } from '@app/_shared/_services/external.service';
+// import { AuroraService } from '@app/_shared/_services/aurora.service';
+
+/**
+ * This Service handles how the date is represented in scripts i.e. ngModel.
+ */
+@Injectable()
+export class CustomAdapter extends NgbDateAdapter<string> {
+
+  readonly DELIMITER = '/';
+
+  fromModel(value: string | null): NgbDateStruct | null {
+    if (value) {
+      const date = value.split(this.DELIMITER);
+      return {
+        day: parseInt(date[0], 10),
+        month: parseInt(date[1], 10),
+        year: parseInt(date[2], 10)
+      };
+    }
+    return null;
+  }
+
+  toModel(date: NgbDateStruct | null): string | null {
+    //return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : null;
+    return date ? (date.day < 10 ? 0 + date.day : date.day) + this.DELIMITER + (date.month < 10 ? 0 + date.month : date.month) + this.DELIMITER + date.year : '';
+  }
+}
+
+/**
+ * This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
+ */
+@Injectable()
+export class CustomDateParserFormatter extends NgbDateParserFormatter {
+
+  readonly DELIMITER = '/';
+
+  parse(value: string): NgbDateStruct | null {
+    if (value) {
+      const date = value.split(this.DELIMITER);
+      return {
+        day: parseInt(date[0], 10),
+        month: parseInt(date[1], 10),
+        year: parseInt(date[2], 10)
+      };
+    }
+    return null;
+  }
+
+  format(date: NgbDateStruct | null): string {
+    return date ? (date.day < 10 ? '0' + date.day : date.day) + this.DELIMITER + (date.month < 10 ? '0' + date.month : date.month) + this.DELIMITER + date.year : '';
+  }
+}
+
+const I18N_VALUES = {
+  'es': {
+    weekdays: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+    months: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
+    weekLabel: 'sem'
+  }
+  // other languages you would support
+};
+
+@Injectable()
+export class I18n {
+  language = 'es';
+}
+
+// Define custom service providing the months and weekdays translations
+@Injectable()
+export class CustomDatepickerI18n extends NgbDatepickerI18n {
+  constructor(private _i18n: I18n) {
+    super();
+  }
+
+  getWeekdayLabel(weekday: number): string {
+    return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
+  }
+
+  getWeekLabel(): string {
+    return I18N_VALUES[this._i18n.language].weekLabel;
+  }
+
+  getMonthShortName(month: number): string {
+    return I18N_VALUES[this._i18n.language].months[month - 1];
+  }
+
+  getMonthFullName(month: number): string {
+    return this.getMonthShortName(month);
+  }
+
+  getDayAriaLabel(date: NgbDateStruct): string {
+    return `${date.day}-${date.month}-${date.year}`;
+  }
+
+  getWeekdayShortName(weekday: number): string {
+    return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
+  };
+}
+
+
+@Component({
+  selector: 'lib-FormAurora',
+  templateUrl: './form-aurora.component.html',
+  styleUrls: ['./form-aurora.component.css'],
+  providers: [
+    {provide: NgbDateAdapter, useClass: CustomAdapter},
+    {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter},
+    {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n},
+    I18n
+  ]
+})
+export class FormAuroraComponent implements OnInit, OnChanges {
+   
+  @Input() dataClassCss: any;
+  @Input() dataForm: any;
+  @Input() clickSubmit: any;
+  @Input() dataReloadForm: any;
+  @Input() welcomeTitle: any;
+  @Input() welcomeDescription: any;
+  @Input() urlPdf: string;
+  @Input() nameCompany: string;
+  @Input() schedule: string;
+  @Input() isSimpleFlow: boolean;  
+  @Input() company: Company;  
+  @Input() steps: Step[];    
+  @ViewChild('formDynamic', { static: true }) formDynamic: NgForm;
+  @Output() response = new EventEmitter<any>();
+  @Output() summit = new EventEmitter<any>();
+  @Output() viewAuthData = new EventEmitter<any>();
+
+  tipodocNumDoc: boolean = false;
+  onSubmitEvent: any = false;
+  countSubmit = 0;
+  watchValid = false;
+  watchRequired = false;
+  captchaValid: boolean = false;
+  displayMonths = 2;
+  navigation = 'select';
+  showWeekNumbers = false;
+  outsideDays = 'visible';
+  respServiceSegmentation: any = null;
+  base64CheckAuthData : any = undefined;
+
+
+
+
+  //emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
+
+  today = moment(new Date());
+  maxYear = this.today.year();
+  minYear = this.today.year() - 82;
+  minDate = this.minYear.toString() + '-' + this.today.month().toString().padStart(2, '0') + '-' + this.today.date().toString().padStart(2, '0');// {year: this.minYear, month: this.today.month(), day: this.today.date()};
+  maxDate = this.maxYear.toString() + '-' + (this.today.month() + 1).toString().padStart(2, '0') + '-' + this.today.date().toString().padStart(2, '0');// {year: this.maxYear, month: this.today.month() + 1, day: this.today.date()};
+
+  //Revisar variables
+  recharge: boolean = false;
+  indicativo: string = "57";
+  @ViewChild("modalTurns", { static: false }) myModal: ElementRef;
+  filldata: Fill;
+  defaultDocType: string = "Cédula de ciudadanía";
+
+  patternNotValidDcto: boolean = false;
+  patternNotValidCel: boolean = false;
+
+  constructor(private data: CommonDataService, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.minDate = new Date(this.minDate).toISOString().split('T')[0]
+    setTimeout(() => {
+      this.startComponent();
+    }, 2000);
+  }
+
+
+  startComponent() {
+    //ordena los campos
+    if (this.dataForm != null && this.dataForm.formQuestions != undefined) {
+      //Same row fields
+      this.tipodocNumDoc = (this.dataForm.formQuestions.some(question => question.question.value === "tipoDoc") && this.dataForm.formQuestions.some(question => question.question.value === "numeroDoc")) ? true : false;
+
+      this.dataForm.formQuestions = this.dataForm.formQuestions.sort(function (a, b) {
+        return a.order - b.order;
+      });
+      let existcaptcha = this.dataForm.formQuestions.filter((item) => item.question.questionType.id == 6);
+
+      if (existcaptcha.length == 0) {
+        this.captchaValid = true;
+      }
+
+      for (const item of this.dataForm.formQuestions) {
+        if (item.question.maxlength == null || item.question.maxlength == undefined || item.question.maxlength == 0) {
+          item.question.maxlength = 524288; //defaultvalue
+        }
+
+        if (item.question.minLength == null || item.question.minLength == undefined) {
+          item.question.minLength = 0;
+        }
+
+        this.dataReloadForm.forEach(element => {
+          this.filldata = element;
+
+          if ((item.question.questionType.id === 2 || item.question.questionType.id === 1 ||
+            item.question.questionType.id === 3) && (this.filldata.data !== null &&
+              this.filldata.data !== undefined) && item.question.id === this.filldata.id) {
+            item.question.registred = this.filldata.data;
+          }
+        });
+
+        if (item.question.registred == null || item.question.minLength == undefined) {
+          item.question.registred = '';
+        }
+      }
+    }
+  }
+
+  range = new FormGroup({
+    start: new FormControl(),
+    end: new FormControl(),
+  });
+
+  resolvedCaptcha(captchaResponse: string) {
+    this.captchaValid = true
+    if (!this.formDynamic.form.value.captcha) {
+      this.formDynamic.controls.captcha.setValue(captchaResponse)
+      this.formDynamic.form.value.captcha = captchaResponse
+      document.getElementById("btnIng").style.opacity = !this.formDynamic.valid ? "0.65" : "1";
+    }
+  }
+
+  //Forms
+  //Metodo para evitar el render de los items del for
+  public trackByIndex(index: number, obj: any): any {
+    return index;
+  }
+
+  onChangeValidPatter(event, question) {
+    if (question.pattern != undefined) {
+      let valid = true;
+      let keyvalid = [8, 32, 37, 38, 39, 40, 46, 9];
+      //diferente de Backpsace
+      //se deja catch por error no controlable en otro tiempo de ejecucion
+      try {
+        if (!keyvalid.includes(event.keyCode)) {
+          const regex = new RegExp(question.pattern);
+          valid = regex.test(event.key);
+        }
+      } catch (error) { }
+
+      return valid;
+    }
+    if (question.questionType !== undefined) {
+      if (question.questionType.description === 'Number') {
+        if (question.value === 'numeroDoc') {
+          this.validateNumeroDocumento(this.formDynamic.controls["numeroDoc"].value.toString());
+        }else if (question.value === 'celular'){
+          this.validateCelular(this.formDynamic.controls["celular"].value.toString());
+        }
+
+      }
+    }
+    document.getElementById("char" + question.value).setAttribute("hidden", "true");
+
+    //if temporal mientras se migran todos los tipos de campos al foreach
+    if (question.questionType.id != 11 && question.questionType.id != 7) {
+      if (this.validMinLength(this.formDynamic, question)) {
+        document.getElementById(question.value).style.borderColor = "#FF0000";
+        document.getElementById("ml" + question.value).removeAttribute("hidden");
+      }
+      else {
+        document.getElementById(question.value).style.borderColor = "#E4E4E4";
+        document.getElementById("ml" + question.value).setAttribute("hidden", "true");
+      }
+      if (this.validMaxLength(this.formDynamic, question)) {
+        document.getElementById(question.value).style.borderColor = "#FF0000";
+        document.getElementById("mxl" + question.value).removeAttribute("hidden");
+      }
+      else {
+        document.getElementById(question.value).style.borderColor = "#E4E4E4";
+        document.getElementById("mxl" + question.value).setAttribute("hidden", "true");
+      }
+    }
+
+
+    this.dataForm.formQuestions.forEach(formQuestion => {
+      switch (formQuestion.question.questionType.id) {
+        //se valida  campo de tipo calendario
+        case 7:
+          if (question.questionType.id == 7)
+            this.calendarRulesValidate(formQuestion);
+          break;
+        //se valida  campo de tipo email
+        case 11:
+          if (question.questionType.id == 11)
+            this.emailRulesValidate(formQuestion);
+          break;
+      }
+    });
+
+    document.getElementById("btnIng").style.opacity = !this.formDynamic.valid ? "0.65" : "1";
+  }
+
+  validOnlyText(event) {
+    let regex = /^[a-zA-Z\u00C0-\u017F]+$/g;
+    if (event.charCode == 32) {
+      return true;
+    }
+    let valid = regex.test(event.key);
+
+    return valid;
+  }
+
+  validDate(event) {
+    /*let pattern = /(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20)[0-9]{2}/;
+    const regex = new RegExp(pattern);
+    valid = regex.test(event.key);
+    */
+    const matches = String(event.key).match(regexType.date.exp);
+    let valid = true
+    if (matches === null)
+      valid = false;
+
+    // alert(valid);
+
+    return valid;
+
+  }
+
+  onChangeValidDate(event) {
+
+    //let pattern = /(?:0[1-9]|1[0-2])\/(?:0[1-9]|[12][0-9]|3[01])\/(?:19|20)[0-9]{2}/;
+    let dateN = /[0-9]|\//
+    let valid = true
+    const regex = new RegExp(dateN);
+    valid = regex.test(event.key);
+    return valid;
+
+  }
+
+  rediretoutside(event, question) {
+    //se deja catch por error no controlable en otro tiempo de ejecucion
+    try {
+      event.preventDefault();
+      window.open(question.value, "_blank");
+    } catch (error) { }
+  }
+
+  /**
+   * Dispatch submit event for validations exists
+   * @param change 
+   */
+  ngOnChanges(change: SimpleChanges) {
+    this.countSubmit++
+  }
+  //onSubmit(form: NgForm) {
+  onSubmit() {
+    let form = this.formDynamic;
+    this.watchValid = true;
+    this.watchRequired = true;
+
+    if (form.valid) {
+      if (!this.validRulesFields(form.controls["numeroDoc"].value.toString(), form.controls["celular"].value.toString(), form.controls["email"].value))
+        return false;
+    }
+
+    if (this.validMinlenghtAllQuestions(form.value) && this.validMaxLengthAllQuestions(form.value) && form.valid) {
+      if (this.dataForm.urlSend != "" && this.captchaValid) {
+        this.http.post<any>(this.dataForm.urlSend, form.value).subscribe((resp) => this.response.emit(resp));
+      } else if (form.valid && this.captchaValid) {
+        this.summit.emit(form.value);
+      }
+    }
+  }
+
+  private findParamBoolean(params: any, idParam: number) {
+    let showDescriptionParam = params.find((x) => x.id == idParam);
+    return showDescriptionParam != null && showDescriptionParam.value == "true";
+  }
+
+  validRulesFields(numeroDoc: String, numeroCel: String, email: String): boolean {
+    // Validaciones para celular en caso de indicativo en Colombia
+    let cel = document.getElementById("charcelular");
+    let doc = document.getElementById("charnumeroDoc");
+    let valOk = true;
+    if (this.indicativo == "+57" || this.indicativo == "57") {
+      let stringOrdenado = this.orderString(numeroDoc);
+      if (this.nameCompany.toUpperCase() !== 'CLARO') {//claro acepta nro consecutivos
+        if (numeroDoc == stringOrdenado) {
+          doc.style.borderColor = "#FF0000";
+          doc.removeAttribute("hidden");
+          doc.textContent = "El numero documento No debe contener caracteres consecutivos";
+          valOk = false;
+
+          //this.msgErrorCampo = "El numero documento No debe contener caracteres consecutivos";
+          //return false;
+        }
+      }
+      if (numeroCel.substring(0, 1) != "3") {
+        cel.style.borderColor = "#FF0000";
+        cel.removeAttribute("hidden");
+        cel.textContent = "El primer carácter del celular debe ser 3";
+        valOk = false;
+
+        //this.msgErrorCampo = "El primer carácter del celular debe ser 3";
+        //return false;
+      }
+      /*
+      if (parseInt(numeroCel.substring(0, 3)) > 350) {
+        cel.style.borderColor = "#FF0000";
+        cel.removeAttribute("hidden");
+        cel.textContent = "El prefijo del celular no debe ser mayor a 350";
+        valOk = false;
+        //this.msgErrorCampo = "El prefijo del celular no debe ser mayor a 350";
+        //return false;
+      }
+      */
+      //En caso de que el número se repita, ejemplo 33333333
+      let listnumber = numeroDoc.substring(0, 1);
+      for (let index = 1; index < numeroDoc.length; index++) {
+        listnumber = listnumber + numeroDoc.substring(0, 1);
+      }
+
+      if (numeroDoc == listnumber) {
+        doc.style.borderColor = "#FF0000";
+        doc.removeAttribute("hidden");
+        doc.textContent = "Caracteres numéricos no se pueden repetirse de manera continua ";
+        valOk = false;
+
+        //this.msgErrorCampo = "Caracteres numéricos no se pueden repetirse de manera continua ";
+        //return false;
+      }
+      if (!this.validateNumeroDocumento(numeroDoc)) {
+        return false;
+      }
+      if (!this.validateCelular(numeroCel)) {
+        return false;
+      }
+
+
+      // En caso de que el número se repita, ejemplo 33333333
+      let arrayPhoneRepeat = Array.from(String(numeroCel), Number);
+      let arrayPhoneOutRepeat = [...new Set(arrayPhoneRepeat)];
+      if (arrayPhoneOutRepeat.length == 1) {
+        cel.style.borderColor = "#FF0000";
+        cel.removeAttribute("hidden");
+        cel.textContent = "El número que ingresa no es valido";
+        valOk = false;
+        //this.msgErrorCampo = "El número que ingresa no es valido";
+        //return false;
+      }
+    } else if (this.indicativo == "+593" || this.indicativo == "593") {
+      if (numeroCel.substring(0, 1) != "9") {
+        cel.style.borderColor = "#FF0000";
+        cel.removeAttribute("hidden");
+        cel.textContent = "El primer carácter del celular debe ser 9";
+        valOk = false;
+        //this.msgErrorCampo = "El primer carácter del celular debe ser 9";
+        //return false;
+      }
+    }
+    //se validan los campos por tipo de campo y no por value
+    this.dataForm.formQuestions.forEach(formQuestion => {
+      switch (formQuestion.question.questionType.id) {
+        //se valida  campo de tipo email
+        case 11:
+          valOk = this.emailRulesValidate(formQuestion);
+          break;
+      }
+    });
+
+    return valOk;
+  }
+
+  orderString(value: String) {
+    let arrayNumber = [];
+    for (let index = 0; index < value.length; index++) {
+      arrayNumber.push(parseInt(value.substring(index, index + 1)));
+    }
+    //ordena el array
+    arrayNumber.sort(function (a, b) {
+      return a - b;
+    });
+    let numberOrder = "";
+    numberOrder = arrayNumber[0];
+    for (let index = 1; index < arrayNumber.length; index++) {
+      numberOrder = numberOrder + (arrayNumber[0] + index).toString();
+    }
+    return numberOrder;
+  }
+
+  validMinlenghtAllQuestions(form: any): boolean {
+    for (const item of this.dataForm.formQuestions) {
+      if (item.question.questionType.id == 1 || item.question.questionType.id == 2) {
+        let minLength = parseInt(item.question.minLength);
+        let formValueLength = parseInt(form[item.question.value].toString().length);
+        if (minLength > 0 && formValueLength != minLength && formValueLength < minLength) return false;
+      }
+    }
+    return true;
+  }
+
+  validMaxLengthAllQuestions(form: any): boolean {
+    for (const item of this.dataForm.formQuestions) {
+      if (item.question.questionType.id == 1 || item.question.questionType.id == 2) {
+        let maxLength = parseInt(item.question.maxLength);
+        let formValueLength = parseInt(form[item.question.value].toString().length);
+        if (maxLength > 0 && formValueLength != maxLength && formValueLength > maxLength) return false;
+      }
+    }
+    return true;
+  }
+
+  validRequired(form: NgForm, question): Boolean {
+    //se deja catch por error no controlable en otro tiempo de ejecucion
+    try {
+      if (question != undefined && question.value != undefined) {
+        if (
+          form.controls[question.value] != undefined &&
+          form.controls[question.value].errors != null &&
+          form.controls[question.value].errors.required
+        ) {
+          return true;
+        }
+      }
+    } catch (error) { }
+    return false;
+  }
+
+  validMinLength(form: NgForm, question): Boolean {
+    //se deja catch por error no controlable en otro tiempo de ejecucion
+    try {
+      if (question != undefined && question.value != undefined) {
+        if (question.minLength > form.controls[question.value].value.toLocaleString().length && question.minLength > 0) {
+          return true;
+        }
+      }
+    } catch (error) { }
+    return false;
+  }
+
+  validMaxLength(form: NgForm, question): Boolean {
+    //se deja catch por error no controlable en otro tiempo de ejecucion
+    try {
+      if (question != undefined && question.value != undefined) {
+        if (question.maxLength > 0) {
+          if (question.maxLength + 1 <= form.controls[question.value].value.toString().replace(/\./g, '').length) {
+            if (!this.formDynamic.controls[question.value].hasError('errorMaxLength')) {
+              this.formDynamic.controls[question.value].setErrors({ 'errorMaxLength': true })
+            }
+            return true;
+          }
+        }
+      }
+    } catch (error) { }
+    return false;
+  }
+
+  tycSelection(event) {
+     this.viewAuthData.emit(event);
+  }
+
+  openLabelUrl(event, question) {
+    event.preventDefault()
+    let tyc = <HTMLInputElement>document.getElementById("check" + question.id);
+    tyc.style.color = "#A3AD32";
+    window.open(question.urllabel, "_blank");
+  }
+
+  cancellKeypress() {
+    return false;
+  }
+  emailRulesValidate(formQuestion) {
+    let valOk = true;
+    try {
+      let hasError = false;
+      document.getElementById(formQuestion.question.id).setAttribute("hidden", "true");
+      let eml = document.getElementById(formQuestion.question.id);
+      let email = formQuestion.question.registred;
+      if (!hasError) {
+        if (formQuestion.question.required && (email == "" || email == undefined || email == null)) {
+          eml.style.borderColor = "#FF0000";
+          eml.textContent = "El correco eléctronico es requerido";
+          eml.removeAttribute("hidden");
+          valOk = false;
+          hasError = true;
+        }
+      }
+      if (!hasError) {
+        if (this.validMinLength(undefined, formQuestion.question)) {
+          eml.style.borderColor = "#FF0000";
+          eml.textContent = "Debe ser mínimo de " + formQuestion.question.minLength + " caracteres";
+          document.getElementById(formQuestion.question.id).removeAttribute("hidden");
+          valOk = false;
+          hasError = true;
+        }
+      }
+      if (!hasError) {
+        if (this.validMaxLength(undefined, formQuestion.question)) {
+          eml.style.borderColor = "#FF0000";
+          eml.textContent = "Debe ser maximo de " + formQuestion.question.maxLength + " caracteres";
+          document.getElementById(formQuestion.question.id).removeAttribute("hidden");
+          valOk = false;
+          hasError = true;
+        }
+      }
+      if (!hasError) {
+
+        const matches = String(email).match(regexType.email.exp);
+        if (matches == null) {
+          eml.style.borderColor = "#FF0000";
+          eml.textContent = "Tu email es invalido";
+          eml.removeAttribute("hidden");
+          valOk = false;
+          hasError = true;
+        }
+      }
+
+    } catch (error) {
+
+    }
+    return valOk;
+  }
+
+  calendarRulesValidate(formQuestion) {
+    let hasError = false;
+    try {
+      document.getElementById(formQuestion.question.id).setAttribute("hidden", "true");
+      let ecalendar = document.getElementById(formQuestion.question.id);
+      //se valida que no sea null si es requerido
+      let date = formQuestion.question.registred;
+      if (formQuestion.question.required && (date == "" || date == undefined || date == null)) {
+        ecalendar.style.borderColor = "#FF0000";
+        ecalendar.textContent = "La fecha es requerida";
+        ecalendar.removeAttribute("hidden");
+      }
+    } catch (error) {
+
+    }
+  }
+
+  validateNotSpace(event) {
+    if (event.charCode == 32) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  validateNumeroDocumento(numeroDoc: String) {
+    if (!numeroDoc.match("^[0-9]*$")) {
+      this.formDynamic.controls["numeroDoc"].setValidators([Validators.pattern('^[0-9]*$')]);
+      this.formDynamic.controls["numeroDoc"].markAsDirty();
+      this.formDynamic.controls["numeroDoc"].updateValueAndValidity();
+      this.formDynamic.controls["numeroDoc"].markAsTouched();
+      this.patternNotValidDcto = true;
+      return false;
+    }
+    this.patternNotValidDcto = false;
+    return true;
+  }
+  validateCelular(numeroCel: String) {
+    if (!numeroCel.match("^[0-9]*$")) {
+      this.formDynamic.controls["celular"].setValidators([Validators.pattern('^[0-9]*$')]);
+      this.formDynamic.controls["celular"].markAsDirty();
+      this.formDynamic.controls["celular"].updateValueAndValidity();
+      this.formDynamic.controls["celular"].markAsTouched();
+      this.patternNotValidCel = true;
+      return false;
+    }
+    this.patternNotValidCel = false;
+    return true;
+  } 
+
+  onkeypress(event)
+  {
+    return (event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57
+  }
+
+  onChangeStep(step: Step, nextStep: Step, value) {
+    if (nextStep && nextStep.stepOrder != 1) {
+      this.resetField(step);
+      nextStep.viewData = [];
+      nextStep.viewData = nextStep.stepData.filter(x => x.relationalIds.includes(Number(value)));
+      
+    }
+  }  
+  resetField(stepIn : Step) {
+    this.steps.forEach(step => {
+      if (step.stepOrder > stepIn.stepOrder) {
+        step.viewData = undefined;
+        step.value = undefined;
+      }
+    });
+  }
+}