0

¿podrían ayudarme?.

Varan tengo este formulario

 <form action="" method="post" enctype="multipart/form-data" class="form-horizontal" #f="ngForm"
            enctype="multipart/form-data">
            <div class="alert alert-danger mt-1 alert-dismissible" role="alert" *ngIf="ValidacionMessage">
                Por Favor verifique los campos marcados con *
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Nombre -->
            <div class="form-group row mx-1">
                <label class="col-md-3 col-form-label" for="text-input">Nombre*</label>
                <div class="col-md-9">
                    <input [disabled]="accion === 'view'" type="text" name="nombre" class="form-control"
                        placeholder="Nombre" [(ngModel)]="empresa.nombre" required>
                </div>
            </div>
            <!-- Nombre -->

            <!-- Direccion -->
            <div class="form-group row mx-1">
                <label class="col-md-3 col-form-label" for="text-input">Direccion*</label>
                <div class="col-md-9">
                    <input [disabled]="accion === 'view'" type="text" name="direccion" class="form-control"
                        placeholder="Direccion" [(ngModel)]="empresa.direccion" required>
                </div>
            </div>
            <!-- Direccion -->

            <!-- Registro Fiscal -->
            <div class="form-group row mx-1">
                <label class="col-md-3 col-form-label" for="text-input">Registro Fiscal*</label>
                <div class="col-md-9">

                    <input [disabled]="accion === 'view'" type="text" name="registro" class="form-control"
                        placeholder="Registro" [(ngModel)]="empresa.registroFiscal" required>
                </div>
            </div>
            <!-- Registro Fiscal -->

            <!-- Telefono -->
            <div class="form-group row mx-1">
                <label class="col-md-3 col-form-label" for="text-input">Telefono*</label>
                <div class="col-md-9">
                    <input [disabled]="accion === 'view'" type="text" name="telefono" class="form-control"
                        placeholder="telefono" [(ngModel)]="empresa.telefono">
                </div>
            </div>
            <!-- Telefono -->

            <!-- Tamaño -->
            <div class="form-group row mx-1">
                <label class="col-md-3 col-form-label" for="text-input">Tamaño*</label>
                <div class="col-md-9">
                    <select [disabled]="accion === 'view'" class="form-control" [(ngModel)]="empresa.tamanoEmpresa_id"
                        name="tamano">
                        <option value="1">Pequeña</option>
                        <option value="2">Mediana</option>
                        <option value="3">Grande</option>
                    </select>
                </div>
            </div>
            <!-- Tamaño-->

            <!-- NIT -->
            <div class="form-group row mx-1">
                <label class="col-md-3 col-form-label" for="text-input">NIT*</label>
                <div class="col-md-9">
                    <input [disabled]="accion === 'view'" type="text" name="nit" class="form-control"
                        placeholder="Numero de NIT" [(ngModel)]="empresa.nit">
                </div>
            </div>
            <!--NIT -->

            <!-- Logo -->
            <div class="form-group row mx-1" *ngIf=" accion !== 'view'">
                <label class="col-md-3 col-form-label" for="text-input">Logo*</label>
                <div class="col-md-9">
                    <div class="custom-file">
                        <input [disabled]="accion === 'view'" type="file" class="custom-file-input" name="logo"
                            [(ngModel)]="empresa.logo">
                        <label class="custom-file-label" for="customFile">Elige un Logo</label>
                    </div>
                </div>
            </div>
            <!--Logo -->

            <!--Razon -->
            <div class="form-group row mx-1">
                <label class="col-md-3 col-form-label" for="text-input">Razon Social*</label>
                <div class="col-md-9">
                    <input [disabled]="accion === 'view'" type="text" name="razon" class="form-control"
                        placeholder="Razon Social" [(ngModel)]="empresa.razonSocial">
                </div>
            </div>
            <!--Razon -->

            <!--Giro -->
            <div class="form-group row mx-1">
                <label class="col-md-3 col-form-label" for="text-input">Giro*</label>
                <div class="col-md-9">
                    <input [disabled]="accion === 'view'" type="text" name="giro" class="form-control"
                        placeholder="Giro" [(ngModel)]="empresa.giro">
                </div>
            </div>
            <!--Giro -->


            <!--Email -->
            <div class="form-group row mx-1">
                <label class="col-md-3 col-form-label" for="text-input">Email*</label>
                <div class="col-md-9">
                    <input [disabled]="accion === 'view'" type="text" name="Email" class="form-control"
                        placeholder="Email" [(ngModel)]="empresa.email" email>
                </div>
            </div>


            <div class="modal-footer">
                <button *ngIf="accion === 'create'" type="button" class="btn btn-secondary" data-dismiss="modal"
                    (click)="limpiar()">Limpiar</button>
                <button *ngIf="accion === 'create'" type="button" (click)="agregarEmpresa(f)" class="btn btn-primary"
                    name="guardar">Guardar</button>
                <button *ngIf="accion === 'editar'" type="button" (click)="editarEmpresa(f)" class="btn btn-primary"
                    name="Editar">Guardar Cambios</button>
                <button *ngIf="accion === 'view'" type="button" (click)="bsModalRef.hide()" class="btn btn-secondary"
                    name="Editar">Cerrar</button>
            </div>
        </form>

Y quisiera poder bloquear los campos registro fiscal, teléfono y nit a solamente números, me refiero a que no sea posible introducir letras ni otros caracteres, así mismo también quisiera poder auto completar un - en estos campos para ayudar al usuario, pero no realmente como hacerlo, he tratado poner type="number" pero me aparece al costado unos controles para subir y bajar números que tampoco se como quitarlos, ¿Me pueden brindar ayudar por favor?, no he encontrado como hacer esto utilizando Angular.

1

1 respuesta 1

1

Agrega esta función al input en un evento de KeyPress (keypress)="validateFormat($event)"

validateFormat(event) {
    let key;
    if (event.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
    } else {
      key = event.keyCode;
      key = String.fromCharCode(key);
    }
    const regex = /[0-9]|\./;
     if (!regex.test(key)) {
      event.returnValue = false;
       if (event.preventDefault) {
        event.preventDefault();
       }
     }
    }

el input te quedaria de esta manera

   <input
    [(ngModel)]="code"
    id="code"
    name="code"
    (keypress)="validateFormat($event)"
  />

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.