cliente-novo.html

<form class="form user-form clearfix" (ngSubmit)="addCE(formAddCE.value)" [formGroup]="formAddCE" novalidate
      autocomplete="off">
  <div
    class="col-sm-14 col-lg-10  col-xs-14 col-sm-offset-1 col-md-12 col-lg-offset-3 col-md-offset-2 col-xs-offset-1 content-padding-global form-client-col">
    <!-- Geral -->
    <div class="row cad-geral">
      <div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
        <h3>Geral</h3>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-16">
        <div class="form-group"
             [ngClass]="{'showInputMsg':formAddCE.controls.cpf.errors && formAddCE.controls.cpf.errors.showWarning}">
          <label for="cpf">CPF</label>
          <input
            type="tel"
            class="form-control input-layout"
            id="cpf"
            #cpfEl
            maxlength="14"
            app-ui-cpf
            [formControl]="formAddCE.get('cpf')"
            [(ngModel)]="selectedClient.cpf"/>
          <app-control-messages [cpfInput]="cpfElForValidation"
                                [element]="cpfEl"
                                [control]="formAddCE.controls.cpf"></app-control-messages>
        </div>
      </div>

      <div class="col-lg-5 col-md-5 col-sm-13 col-xs-16">
        <div class="form-group"
             [ngClass]="{'showInputMsg':formAddCE.controls.nome.errors && formAddCE.controls.nome.errors.showWarning}">
          <label for="nome" class="label-invalid-required">Nome</label>
          <input
            type="text"
            class="form-control input-layout"
            id="nome"
            #nomeEl
            [(ngModel)]="selectedClient.nome"
            [formControl]="formAddCE.get('nome')"
            (blur)="makeNick(selectedClient.nome)"/>
          <app-control-messages [element]="nomeEl"
                                [control]="formAddCE.controls.nome"></app-control-messages>
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-8 col-xs-8">
        <div class="form-group">
          <label for="apelido">Apelido</label>
          <input
            type="text"
            class="form-control input-layout"
            id="apelido"
            [formControl]="formAddCE.get('apelido')"
            [(ngModel)]="selectedClient.apelido"/>
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">
        <div class="form-group">
          <label for="nascimento">Nascimento</label>
          <datetime id="nascimento"
                    #dataEl
                    (dateChange)="$event? touched = true: touched=false"
                    [timepicker]="false" placeholder="Digite ou selecione uma data"
                    [datepicker]="datepickerOpts" [(ngModel)]="selectedClient.nascimento"
                    [formControl]="formAddCE.get('nascimento')"></datetime>
        </div>
      </div>

      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
        <div class="form-group">
          <label class="label-invalid-required">Sexo</label>
          <table>
            <tr>
              <td>
                <div class="radio radio-darkblue">
                  <input id="sexo_m" type="radio" [formControl]="formAddCE.get('sexo')"
                         [(ngModel)]="selectedClient.sexo" name="sexo"
                         value="M">
                  <label class="fake-check" for="sexo_m">M</label>
                </div>
              </td>
              <td>
                <div class="radio radio-darkblue">
                  <input id="sexo_f" type="radio" [(ngModel)]="selectedClient.sexo"
                         [formControl]="formAddCE.get('sexo')" name="sexo"
                         value="F">
                  <label class="fake-check" for="sexo_f">F</label>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>

    </div><!-- Geral -->

    <!-- Emails -->
    <div class="row cad-emails">
      <div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
        <h3>Emails</h3>

        <!-- Emails Repeat Start -->
        <div class="row animHeight"
             *ngFor="let item of formAddCE.controls.emails.controls; let i = index">
          <div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
            <div class="form-group">
              <label>
                <a href tabindex="-1"
                   (click)="selectedClient.emailPreferencial=i; $event.preventDefault()"
                   [ngClass]="{'icon icon-estrela icon-check': selectedClient.emailPreferencial == i, 'icon icon-estrela-vazada icon-uncheck': selectedClient.emailPreferencial != i}">
                </a>
              </label>
            </div>
          </div>
          <div formArrayName="emails">
            <div [ngClass]="{'fadeItem':item.excluir}" class="col-lg-9 col-md-14 col-sm-14 col-xs-12">
              <div class="form-group"
                   [ngClass]="{'showInputMsg':item.controls.email.errors && item.controls.email.errors.showWarning}">
                <label for="emails_{{i}}">Email</label>
                <input
                  type="text"
                  id="emails_{{i}}"
                  #emailEl
                  app-ui-mailgun
                  (didYoumean)="makHint.hint['emails'+i]=$event"
                  class="form-control input-layout"
                  [(ngModel)]="selectedClient.emails['emails'+i]"
                  [formControl]="item.controls.email"
                  autocapitalize="off"/>
                <app-mailgun-hint [ctrl]="item.controls.email"
                                  [index]="i" #makHint></app-mailgun-hint>
                <app-control-messages [element]="emailEl"
                                      [control]="item.controls.email"></app-control-messages>
              </div>
            </div>
          </div>

          <div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
            <div class="form-group">
              <label class="edit-form-pop">
                <template #popTemplate>
                  <ul class="action-links">
                    <li><a class="action" (click)="removeEmail(i)">{{(item.excluir) ? 'Cancelar excluir':'Excluir'}}</a>
                    </li>
                  </ul>
                </template>
                <a #pop="bs-popover" href (click)="$event.preventDefault()" class="icon icon-info-dots"
                   [popover]="popTemplate"
                   placement="left"
                   triggers="click"></a>
              </label>
            </div>
          </div>
        </div>
        <!-- Emails Repeat End -->
        <div class="row">
          <div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
            <div class="form-group">
              <a href tabindex="-1" (click)="addEmail(); $event.preventDefault()"
                 class="icon-mais-bold add-item text-nowrap">Adicionar
                email</a>
            </div>
          </div>
        </div>

      </div>
    </div><!-- Emails -->

    <!-- Telefones -->
    <div class="row cad-telefones">
      <div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
        <h3>Telefones</h3>

        <!-- Telefones Repeat Start -->
        <div class="row animHeight" *ngFor="let item of formAddCE.controls.telefones.controls; let i = index">
          <div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
            <div class="form-group">
              <label>
                <a href tabindex="-1"
                   (click)="selectedClient.telefonePreferencial=i; $event.preventDefault()"
                   [ngClass]="{'icon icon-estrela icon-check': selectedClient.telefonePreferencial == i, 'icon icon-estrela-vazada icon-uncheck': selectedClient.telefonePreferencial != i }">
                </a>
              </label>
            </div>
          </div>

          <div formArrayName="telefones">
            <div [ngClass]="{'fadeItem':item.excluir}" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
              <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                  <div class="form-group"
                       [ngClass]="{'showInputMsg':item.controls.ddd.errors && item.controls.ddd.errors.showWarning}">
                    <label for="ddd_{{i}}"
                           [ngClass]="{'label-invalid-required': isRequiredTel(item.controls)}">DDD</label>
                    <input
                      type="tel"
                      class="form-control input-layout"
                      id="ddd_{{i}}"
                      [required]="isRequiredTel(item.controls)"
                      [(ngModel)]="selectedClient.telefones['ddd'+i]"
                      maxlength="2"
                      #dddEl
                      [formControl]="item.controls.ddd"
                      (keyup)="dddKeyUp($event, 'telnumero_'+i, item.controls.ddd.value)"
                      ui-digits/>
                    <app-control-messages [element]="dddEl"
                                          [control]="item.controls.ddd"></app-control-messages>
                  </div>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                  <div class="form-group"
                       [ngClass]="{'showInputMsg':item.controls.telefone.errors && item.controls.telefone.errors.showWarning}">
                    <label for="telnumero_{{i}}"
                           [ngClass]="{'label-invalid-required': isRequiredTel(item.controls)}">Telefone</label>
                    <input
                      #telEl
                      type="tel"
                      class="form-control input-layout"
                      id="telnumero_{{i}}"
                      [required]="isRequiredTel(item.controls)"
                      [(ngModel)]="selectedClient.telefones['numero'+i]"
                      maxlength="10"
                      (blur)="updateTelefoneValidity()"
                      [formControl]="item.controls.telefone"
                      (keydown)="selectedClient.telefones['tipo'+i] = autoCelClass(selectedClient.telefones['numero'+i])"
                      app-ui-phone/>
                    <app-control-messages [element]="telEl"
                                          [telInput]="telElForValidation"
                                          [ddd]="item.controls.ddd"
                                          [control]="item.controls.telefone"></app-control-messages>
                  </div>
                </div>

                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                  <div class="form-group"
                       [ngClass]="{'showInputMsg':item.controls.tipo.errors && item.controls.tipo.errors.showWarning}">
                    <label
                      for="tipotel_{{i}}"
                      [ngClass]="{'label-invalid-required': isRequiredTel(item.controls)}">Tipo</label>
                    <ng-selectize id="tipotel_{{i}}" [config]="configTipo"
                                  [options]="optionsTipoTel"
                                  [placeholder]="'Escolha'"
                                  #tipoTelEl
                                  [formControl]="item.controls.tipo"
                                  [required]="isRequiredTel(item.controls)"
                                  [(ngModel)]="selectedClient.telefones['tipo'+i]"></ng-selectize>
                    <app-control-messages [element]="tipoTelEl"
                                          [itemClass]="'ui-validation-message-combo-box'"
                                          [control]="item.controls.tipo"></app-control-messages>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
            <div class="form-group">
              <label class="edit-form-pop">
                <template #popTemplate>
                  <ul class="action-links">
                    <li><a class="action" (click)="removeTelefone(i)">Excluir</a>
                    </li>
                  </ul>
                </template>
                <a #pop="bs-popover" href (click)="$event.preventDefault()" class="icon icon-info-dots"
                   [popover]="popTemplate"
                   placement="left"
                   triggers="click"></a>
              </label>
            </div>
          </div>
        </div>
        <!-- Telefones Repeat End -->
        <div class="row">
          <div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
            <div class="form-group">
              <a href tabindex="-1" (click)="addTelefone(); $event.preventDefault()"
                 class="icon-mais-bold add-item text-nowrap">Adicionar
                Telefone</a>
            </div>
          </div>
        </div>

      </div>
    </div><!-- Telefones -->

    <!-- Endereços -->
    <div class="row cad-telefones">
      <div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
        <h3>Endereços</h3>

        <!-- Endereços Repeat Start -->
        <div class="row animHeight" *ngFor="let item of formAddCE.controls.enderecos.controls; let i = index">
          <div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
            <div class="form-group">
              <label>
                <a href tabindex="-1"
                   (click)="selectedClient.enderecoPreferencial=1; $event.preventDefault()"
                   [ngClass]="{'icon icon-estrela icon-check': selectedClient.enderecoPreferencial == i, 'icon icon-estrela-vazada icon-uncheck': selectedClient.enderecoPreferencial != i }">
                </a>
              </label>
            </div>
          </div>

          <div [ngClass]="{'fadeItem':item.excluir}" class="col-lg-14 col-md-14 col-sm-14 col-xs-12">
            <div class="row">

              <!-- Tipo Endereço -->
              <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="form-group"
                     [ngClass]="{'showInputMsg':formAddCE.controls.enderecos.errors && formAddCE.controls.enderecos.errors.showWarning}">
                  <label for="tipoend_{{i}}"
                         [ngClass]="{'label-invalid-required':requiredAdress(item)}">Tipo</label>
                  <ng-selectize *ngIf="item.controls.tipo" id="tipoend_{{i}}" [config]="configTipo"
                                [options]="optionsTipoEndereco"
                                [formControl]="item.controls.tipo"
                                [required]="requiredAdress(item)"></ng-selectize>
                </div>
              </div>

              <!-- Cep -->
              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-7">
                <div class="form-group"
                     [ngClass]="{'showInputMsg':formAddCE.controls.enderecos.errors && formAddCE.controls.enderecos.errors.showWarning}">
                  <label for="cep_{{i}}"
                         [ngClass]="{'label-invalid-required':requiredAdress(item)}">CEP</label>
                  <input
                    type="tel"
                    name="cep_{{i}}"
                    class="form-control input-layout"
                    id="cep_{{i}}"
                    maxlength="9"
                    [formControl]="item.controls.cep"
                    [(ngModel)]="selectedClient.enderecos['cep'+i]"
                    [required]="requiredAdress(item)"/>
                </div>
              </div>

              <!-- Estado -->
              <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3">
                <div class="form-group"
                     [ngClass]="{'showInputMsg':formAddCE.controls.enderecos.errors && formAddCE.controls.enderecos.errors.showWarning}">
                  <label [ngClass]="{'label-invalid-required':requiredAdress(item)}"
                         for="{{ 'estado'+i }}">UF</label>
                  <input [formControl]="item.controls.uf"
                         [typeahead]="states"
                         [required]="requiredAdress(item)"
                         [(ngModel)]="selectedClient.enderecos['estado'+i]"
                         id="{{ 'estado'+i }}"
                         typeaheadMinLength="0"
                         class="form-control input-layout">
                </div>
              </div>

              <!-- Cidade -->
              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-8">
                <div class="form-group"
                     [ngClass]="{'showInputMsg':formAddCE.controls.enderecos.errors && formAddCE.controls.enderecos.errors.showWarning}">
                  <label for="cidade_{{i}}"
                         [ngClass]="{'label-invalid-required':requiredAdress(item)}">Cidade</label>
                  <input [typeahead]="cities"
                         id="cidade_{{i}}"
                         [formControl]="item.controls.cidade"
                         [required]="requiredAdress(item)"
                         [(ngModel)]="selectedClient.enderecos['cidade'+i]"
                         typeaheadMinLength="0"
                         class="form-control input-layout">
                </div>
              </div>

              <!-- Bairro -->
              <div class="col-lg-5 col-md-5 col-sm-3 col-xs-8">
                <div class="form-group">
                  <label for="bairro[{{i}}]">Bairro</label>
                  <input [typeahead]="bairros"
                         id="bairro[{{i}}]"
                         [formControl]="item.controls.bairro"
                         [(ngModel)]="selectedClient.enderecos['bairro'+i]"
                         typeaheadMinLength="0"
                         class="form-control input-layout">
                </div>
              </div>
            </div>
            <div class="row">
              <!-- Tipo Logradouro -->
              <div class="col-lg-2 col-md-2 col-sm-3 col-xs-5">
                <div class="form-group">
                  <label for="tipoLogradouro_{{i}}">Tipo</label>
                  <input [typeahead]="tipoLogradouro"
                         id="tipoLogradouro_{{i}}"
                         [formControl]="item.controls.tipoLogradouro"
                         [(ngModel)]="selectedClient.enderecos['tipoLogradouro'+i]"
                         typeaheadMinLength="0"
                         class="form-control input-layout">
                </div>
              </div>

              <!-- Logradouro -->
              <div class="col-lg-8 col-md-8 col-sm-10 col-xs-8">
                <div class="form-group">
                  <label for="logradouro_{{i}}">Logradouro</label>
                  <input
                    type="text"
                    id="logradouro_{{i}}"
                    class="form-control input-layout"
                    [formControl]="item.controls.logradouro"
                    [(ngModel)]="selectedClient.enderecos['logradouro'+i]"
                    maxlength="1000"/>
                </div>
              </div>

              <!-- Número -->
              <div ui-fix-tel-inputs class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
                <div class="form-group">
                  <label for="endnumero_{{i}}">Número</label>
                  <input
                    type="tel"
                    data-text="true"
                    class="form-control input-layout"
                    id="endnumero_{{i}}"
                    [formControl]="item.controls.numero"
                    [(ngModel)]="selectedClient.enderecos['endNumero'+i]"
                    maxlength="30">
                </div>
              </div>

              <!-- Complemento -->
              <div class="col-lg-4 col-md-4 col-sm-16 col-xs-16">
                <div class="form-group">
                  <label for="complemento_{{i}}">Complemento</label>
                  <input
                    type="text"
                    class="form-control input-layout"
                    id="complemento_{{i}}"
                    [formControl]="item.controls.complemento"
                    [(ngModel)]="selectedClient.enderecos['complemento'+i]"
                    maxlength="30">
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
            <div class="form-group">
              <label class="edit-form-pop">
                <template #popTemplate>
                  <ul class="action-links">
                    <li><a class="action" (click)="removeEndereco(i)">Excluir</a>
                    </li>
                  </ul>
                </template>
                <a #pop="bs-popover" href (click)="$event.preventDefault()" class="icon icon-info-dots"
                   [popover]="popTemplate"
                   placement="left"
                   triggers="click"></a>
              </label>
            </div>
          </div>
        </div>
        <!-- Endereços Repeat End -->

        <div class="row">
          <div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
            <div class="form-group">
              <a href tabindex="-1" (click)="addEndereco(); $event.preventDefault()"
                 class="icon-mais-bold add-item text-nowrap">Adicionar
                Endereço</a>
            </div>
          </div>
        </div>

      </div>
    </div><!-- Endereços -->
  </div>
  <div class="user-footer">
    <div class="col-lg-16 col-md-16 col-sm-16 col-xs-16 text-right">
      <div class="btn-user-row">
        <button type="button" (click)="cadCancel()" class="btn btn-default btn-md">Cancelar</button>
        <ui-set-touched
          [btnText]="'clientes.clienteNovo.adicionar' | translate"
          [canSend]="formAddCE.valid"
          [form]="formAddCE"
          [btnType]="'submit'"></ui-set-touched>
      </div>
    </div>
  </div>
</form>