Skip to content

Instantly share code, notes, and snippets.

@Klerith
Last active February 12, 2024 15:43
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save Klerith/5729dcfb170595f84d1b564a182ffbc2 to your computer and use it in GitHub Desktop.
Save Klerith/5729dcfb170595f84d1b564a182ffbc2 to your computer and use it in GitHub Desktop.
Páginas que usaremos en la sección de Formularios Reactivos
<h2>Reactivos: Básicos</h2>
<hr>
<div class="row">
<div class="col">
<form autocomplete="off">
<!-- Campo de producto -->
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">Producto</label>
<div class="col-sm-9">
<input type="text"
class="form-control"
placeholder="Nombre del producto">
<span class="form-text text-danger">
<!-- Debe de ser de 3 letras -->
error message
</span>
</div>
</div>
<!-- Campo de producto -->
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">Precio</label>
<div class="col-sm-9">
<input type="number"
class="form-control"
placeholder="Precio del producto">
<span class="form-text text-danger">
El precio debe de ser 0 o mayor
</span>
</div>
</div>
<!-- Campo de existencias -->
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">Existencias</label>
<div class="col-sm-9">
<input type="number"
class="form-control"
placeholder="Existencias del producto">
<span class="form-text text-danger">
Las existencias deben de ser 0 o mayor
</span>
</div>
</div>
<div class="row">
<div class="col">
<button type="submit"
class="btn btn-primary float-end">
Guardar
</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col">
<span>Valid</span>
<pre>{{ 'objeto' | json }}</pre>
<span>Pristine</span>
<pre>{{ 'objeto' | json }}</pre>
<span>Touched</span>
<pre>{{ 'objeto' | json }}</pre>
<span>Value</span>
<pre>{{ 'objeto' | json }}</pre>
<span>Precio</span>
<pre>{{ 'objeto' | json }}</pre>
<span>Producto</span>
<pre>{{ 'objeto' | json }}</pre>
</div>
</div>
<h2>Reactivos: <small> Dinámicos </small></h2>
<hr>
<form autocomplete="off">
<!-- Nombre -->
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">Nombre</label>
<div class="col-sm-9">
<input class="form-control"
placeholder="Nombre de la persona">
<span class="form-text text-danger">
error message
</span>
</div>
</div>
<!-- Agregar Favorito -->
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">Agregar</label>
<div class="col-sm-9">
<div class="input-group">
<input class="form-control"
placeholder="Agregar favorito">
<button class="btn btn-outline-primary"
type="button">
Agregar favorito
</button>
</div>
</div>
</div>
<!-- Lista de Juegos Favoritos -->
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">Favoritos</label>
<div class="col-sm-9">
<div class="mb-1">
<div class="input-group">
<input class="form-control">
<button class="btn btn-outline-danger"
type="button">
Eliminar
</button>
</div>
<span class="form-text text-danger">
Este campo es requerido
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button type="submit"
class="btn btn-primary float-end"
>
<!-- [disabled]="myForm.invalid" -->
Guardar
</button>
</div>
</div>
</form>
<span>Valid</span>
<pre>{{ 'object' | json }}</pre>
<br>
<span>Value</span>
<pre>{{ 'object' | json }}</pre>
<br>
<span>Agregar Juego</span>
<pre>{{ 'object' | json }}</pre>
<pre>{{ 'object' | json }}</pre>
<h2>Validaciones Reactivas</h2>
<hr>
<div class="row">
<div class="col">
<form autocomplete="off">
<!-- Nombre -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Nombre</label>
<div class="col-sm-9">
<input type="text"
class="form-control"
placeholder="Nombre del usuario">
<span class="form-text text-danger">
Debe de ser en formato de nombre y apellido
</span>
</div>
</div>
<!-- Email -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email"
class="form-control"
placeholder="Email del usuario">
<span class="form-text text-danger">
mensaje de error del email
</span>
</div>
</div>
<!-- Username -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Username</label>
<div class="col-sm-9">
<input type="text"
class="form-control"
placeholder="Nombre código del usuario">
<span class="form-text text-danger">
El username no puede ser Strider
</span>
</div>
</div>
<!-- Password -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password"
class="form-control"
placeholder="Password de su cuenta">
<span class="form-text text-danger">
La contraseña debe de ser mayor de 6 caracteres.
</span>
</div>
</div>
<!-- Password2 -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Confirmar</label>
<div class="col-sm-9">
<input type="password"
class="form-control"
placeholder="Confirmar la contraseña">
<span class="form-text text-danger">
Las contraseñas deben de ser iguales
</span>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary float-end"
type="submit">
Crear
</button>
</div>
</div>
</form>
</div>
</div>
<h2>Form Valid: </h2>
<h2>Form Status: </h2>
<h2>Form Pending: </h2>
<h2>Form errors</h2>
<pre>{{ 'formulario' | json }}</pre>
<h5>Nombre</h5>
<pre>{{ 'formulario' | json }}</pre>
<h5>Email</h5>
<pre>{{ 'formulario' | json }}</pre>
<h5>Username</h5>
<pre>{{ 'formulario' | json }}</pre>
<h5>Password</h5>
<pre>{{ 'formulario' | json }}</pre>
<h5>Confirmar</h5>
<pre>{{ 'formulario' | json }}</pre>
<h2>Reactivos: Switches</h2>
<hr>
<form autocomplete="off">
<!-- Radio -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Género</label>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input"
type="radio"
value="M"
id="radioMasculino">
<label class="form-check-label" for="radioMasculino">
Masculino
</label>
</div>
<div class="form-check">
<input class="form-check-input"
type="radio"
value="F"
id="radioFemenino">
<label class="form-check-label" for="radioFemenino">
Femenino
</label>
</div>
</div>
</div>
<!-- Switches -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Notificaciones</label>
<div class="col-sm-9">
<div class="form-check form-switch mt-2">
<input class="form-check-input"
type="checkbox"
id="flexSwitchCheckChecked">
<label class="form-check-label" for="flexSwitchCheckChecked">Quiero recibir notificaciones</label>
</div>
</div>
</div>
<!-- Switches -->
<div class="row mb-3">
<label class="col-sm-3 col-form-label"></label>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input"
type="checkbox"
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Términos y condiciones de uso
</label>
</div>
<span class="form-text text-danger">
Debe de aceptar las condiciones de uso
</span>
</div>
</div>
<!-- Boton submit -->
<div class="row">
<div class="col">
<button class="btn btn-primary float-end"
type="submit">
Guardar
</button>
</div>
</div>
</form>
<h5>Valor del formulario</h5>
<pre>{{ 'object' | json }}</pre>
<br>
<h5>Persona</h5>
<pre>{{ 'object' | json }}</pre>
<br>
<h5>Valid</h5>
<pre>{{ 'object' | json }}</pre>
<!-- <h5>Términos</h5> -->
<!-- <pre>{{ myForm.controls?.terminos?.errors | json }}</pre> -->
<!-- <br>
<pre>Condiciones: </pre> -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment